Vue 數組更新檢測

變異方法

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

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

替換數組

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

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

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

注意事項

由于 Javascript 的限制，Vue 不能檢測到以下變動的數組：

1.利用索引直接設置一個項，例如： vm.items[index] = newVal

2.修改數組的長度時，例如： vm.items.length = newLength

例如：

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

為了解決第一類問題，一下兩種方法都可以實現和 vm.items[index] = newVal 相同的效果，同時也將觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(vm.items, index, newVal)

// Array.prototype.splice
vm.items.splice(index, 1, newVal)

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

vm.$set(vm.items, index, newVal)

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

vm.items.splice(newLength)