Vue：不能檢測到Object/Array更新的狀況

前言

看文檔不認真，開發也沒有多注意，老是hack。忽悠忽悠就過去，但怎麼說，歪門邪道仍是不太好，如今就亡羊補牢，總結總結。

數組

索引

1. 使用下標更新數組元素；
2. 使用賦值方式改變數組長度；
3. 使用下標增刪數組元素；

正文

• 使用下標更新數組元素

data: {
   arrs: [0, 1, 2, 3]
}
複製代碼

直接使用this.arrs[0] = 'zero';雖然數組確實是被更新了，可是更新不會被渲染到視圖（html頁面）上。由於Vue沒有檢測到數組的更新。

因爲 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');
複製代碼

• 使用賦值方式改變數組長度 即this.arrs.length = 100;無效！

官方應對方法：

1. vm.items.splice(newLength)

this.arrs.splice(100);
複製代碼

• 使用下標增刪數組元素 即一下操做無效：

this.arrs[this.arrs.length] = this.arrs.length;
複製代碼

官方應對方法：變異方法。

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. 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 元素獲得最大範圍的重用而實現了一些智能的、啓發式的方法，因此用一個含有相同元素的數組去替換原來的數組是很是高效的操做。

對象

索引

1. 增刪元素；

正文

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對數組也是有效傳送門