vue更新數組時觸發視圖更新的方法

變異方法：

---

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

替換數組：

---

例如：filter(), concat()和 slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用這些非變異方法時，可以用新數組替換舊數組：

example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) 

你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的、啟發式的方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

注意事項：

---

由於 JavaScript 的限制，Vue 不能檢測以下變動的數組：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

舉個例子：

var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的 

為了解決第一類問題，以下兩種方式都可以實現和vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新：

// Vue.set Vue.set(vm.items, indexOfItem, newValue) 

// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) 

你也可以使用vm.$set實例方法，該方法是全局方法 Vue.set 的一個別名：

vm.$set(vm.items, indexOfItem, newValue) 

為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)