Vue不能檢測到Object/Array更新的情況的解決
前言
看文件不認真，開發也沒有多注意，總是hack。忽悠忽悠就過去，但怎麼說，歪門邪道還是不太好，現在就亡羊補牢，總結總結。
陣列
索引
- 使用下標更新陣列元素；
- 使用賦值方式改變陣列長度；
- 使用下標增刪陣列元素；
正文
使用下標更新陣列元素
data: {
arrs: [0, 1, 2, 3]
}
直接使用 this.arrs[0] = 'zero' ;雖然陣列確實是被更新了，但是更新不會被渲染到檢視（html頁面）上。因為Vue沒有檢測到陣列的更新。
由於 JavaScript/">JavaScript 的限制，Vue 不能檢測以下變動的陣列：
當你利用索引直接設定一個項時，例如：vm.items[indexOfItem] = newValue
當你修改陣列的長度時，例如：vm.items.length = newLength
官方應對方法：
1、Vue.set( target, key, value )
Vue.set(this.arrs, 0, 'zero');
2.vm.items.splice(indexOfItem, 1, newValue)
this.arrs.splice(0, 1, 'zero');
前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。
使用賦值方式改變陣列長度
即this.arrs.length = 100;無效！
官方應對方法：
1、vm.items.splice(newLength)
this.arrs.splice(100);
使用下標增刪陣列元素
即一下操作無效：
this.arrs[this.arrs.length] = this.arrs.length;
官方應對方法：變異方法。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
this.arrs.push(this.arrs.length);
8、替換陣列(改變引用)
如官方所言：filter(), concat() 和 slice()都是會返回一個新陣列
this.arrs = this.arrs.contact(this.arrs.length); // or // this.arrs = this.arrs.contact([this.arrs.length]);
官方對效能問題的迴應：
你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。Vue 為了使得 DOM 元素得到最大範圍的重用而實現了一些智慧的、啟發式的方法，所以用一個含有相同元素的陣列去替換原來的陣列是非常高效的操作。
前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。
物件
索引
增刪元素；
正文
data: {
foo: { name: 'isaac' }
}
增刪元素
this.foo.job = 'coder'; delete this.foo.name;
如上增刪元素是無效的。
官方的解決方法：
// 新增 Vue.set(this.foo, 'job', 'coder'); // 刪除 Vue.delete(this.foo, 'name');
Vue.delete對陣列也是有效 ofollow,noindex">傳送門