前言

觸發視圖更新的hack，hack的是什么？hack那些數據改變卻沒有被vue檢測到的更新！那么vue有哪些情況是檢測不到數據的變動的？ 官方說明的有下面兩大類：

• 數組

使用下標更新數組元素；

使用賦值方式改變數組長度；

使用下標增刪數組元素；

• 對象

對象的增刪

• 其他

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

正文

那么要怎么hack？！

原理也很簡單~

既然vue檢測不到數據的變化，那么就強制觸發vue去更新！但是vue并沒有提供這樣的接口（我是說統一的接口，不是官方提供的解決方案），如果有提供就不叫hack了對吧！

是這樣的：對于每次vue可以檢測到的數據變動，vue都會重新去渲染整個視圖上的變動，整個，注意是整個，并不是說，data里面那個對象或列表的數據變動了，就僅僅更新對應的視圖區域，不是這樣的，是整個，ok！所以可以利用這一點！

具體的做法就是： 在修改vue檢測不到的數據后，再變動一下vue可以檢測到的數據，比如更新一下一個隨機數

實踐

<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> 復制代碼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);});}}} });

正如前言中說的幾種情況，都會在之后更新一個data.counter，而data.counter則是可以檢測被檢測到的！

缺點

雖然這樣hack確實出發了視圖的更新，但是有個缺點：

• 對應的watch是檢測不到數據的變動！

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

最后說一句

上面的hack是我在實踐中發現的，應該在說debug的時候！因為自己清洗知道數組和對象那些情況下是觸發不到視圖更新的，但是某次卻神奇地更新了視圖！然后就開始慢慢地測試~

原文發布時間為：2018年06月25日
原文作者：issaxite
本文來源：?掘金?如需轉載請聯系原作者

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。