前言

觸發(fā)視圖更新的hack，hack的是什么？hack那些數(shù)據(jù)改變卻沒(méi)有被vue檢測(cè)到的更新！那么vue有哪些情況是檢測(cè)不到數(shù)據(jù)的變動(dòng)的？ 官方說(shuō)明的有下面兩大類：

• 數(shù)組

使用下標(biāo)更新數(shù)組元素；

使用賦值方式改變數(shù)組長(zhǎng)度；

使用下標(biāo)增刪數(shù)組元素；

• 對(duì)象

對(duì)象的增刪

• 其他

比如props到子組件的原始屬性 …… 具體看另外一篇文章: [傳送門(mén): Vue：不能檢測(cè)到Object/Array更新的情況]

正文

那么要怎么hack？！

原理也很簡(jiǎn)單~

既然vue檢測(cè)不到數(shù)據(jù)的變化，那么就強(qiáng)制觸發(fā)vue去更新！但是vue并沒(méi)有提供這樣的接口（我是說(shuō)統(tǒng)一的接口，不是官方提供的解決方案），如果有提供就不叫hack了對(duì)吧！

是這樣的：對(duì)于每次vue可以檢測(cè)到的數(shù)據(jù)變動(dòng)，vue都會(huì)重新去渲染整個(gè)視圖上的變動(dòng)，整個(gè)，注意是整個(gè)，并不是說(shuō)，data里面那個(gè)對(duì)象或列表的數(shù)據(jù)變動(dòng)了，就僅僅更新對(duì)應(yīng)的視圖區(qū)域，不是這樣的，是整個(gè)，ok！所以可以利用這一點(diǎn)！

具體的做法就是： 在修改vue檢測(cè)不到的數(shù)據(jù)后，再變動(dòng)一下vue可以檢測(cè)到的數(shù)據(jù)，比如更新一下一個(gè)隨機(jī)數(shù)

實(shí)踐

<div id="app" v-cloak :data-counter="counter"><dl><span v-for="(item, index) in arrs">{{ index === 0 ? '' : ', ' }}{{ item }}</span></dl><dl v-for="(item, key) in items">{{key}}: {{item}}</dl><button @click="operate('add')">add</button><button @click="operate('delete')">delete</button><button @click="operate('update')">update</button><button @click="operate('updateArrs')">update arrs</button> </div> 復(fù)制代碼new Vue({el: '#app',data: {useCounter: true,counter: 0,arrs: [0, 1, 2, 3, 4],items: {name: 'isaac',position: 'coder'}},watch: {items: {deep: true,handler(val, oldVal) {console.log({ val, oldVal });}}},methods: {env(callback) {callback && callback();this.useCounter && this.counter++;},operate(order) {if(order === 'add') {this.env(() => {this.items.goodAt = 'javascript';});} else if(order === 'delete') {this.env(() => {delete this.items.goodAt;});} else if(order === 'update'){this.items.name = Math.random();} else if(order === 'updateArrs') {this.env(() => {this.arrs[0] = Math.round(Math.random() * 100);});}}} });

正如前言中說(shuō)的幾種情況，都會(huì)在之后更新一個(gè)data.counter，而data.counter則是可以檢測(cè)被檢測(cè)到的！

缺點(diǎn)

雖然這樣hack確實(shí)出發(fā)了視圖的更新，但是有個(gè)缺點(diǎn)：

• 對(duì)應(yīng)的watch是檢測(cè)不到數(shù)據(jù)的變動(dòng)！

所以說(shuō)，最好還是使用官方提供的解決方案！

最后說(shuō)一句

上面的hack是我在實(shí)踐中發(fā)現(xiàn)的，應(yīng)該在說(shuō)debug的時(shí)候！因?yàn)樽约呵逑粗罃?shù)組和對(duì)象那些情況下是觸發(fā)不到視圖更新的，但是某次卻神奇地更新了視圖！然后就開(kāi)始慢慢地測(cè)試~

原文發(fā)布時(shí)間為：2018年06月25日
原文作者：issaxite
本文來(lái)源：?掘金?如需轉(zhuǎn)載請(qǐng)聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的Vue：触发视图更新的hack的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。