數(shù)組更新檢測
數(shù)組有一些方法可以導(dǎo)致視圖更新
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替換數(shù)組： 例如：filter(), concat() 和 slice() 婉宰。這些不會(huì)改變?cè)紨?shù)組凑术，但總是返回一個(gè)新數(shù)組。
可以用新數(shù)組替換舊數(shù)組被辑，你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個(gè)列表抄谐。幸運(yùn)的是嗅钻，事實(shí)并非如此沪曙。Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的遗座、啟發(fā)式的方法，所以用一個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作扼仲。
注意事項(xiàng)
由于 JavaScript 的限制远寸，Vue 不能檢測以下變動(dòng)的數(shù)組：
當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)抄淑，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的
為了解決第一類問題驰后，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果肆资，同時(shí)也將觸發(fā)狀態(tài)更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個(gè)別名：
vm.$set(vm.items, indexOfItem, newValue)
為了解決第二類問題灶芝，你可以使用 splice：
vm.items.splice(newLength)
對(duì)象更改檢測注意事項(xiàng)
還是由于 JavaScript 的限制郑原，Vue 不能檢測對(duì)象屬性的添加或刪除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
vm.b = 2
// `vm.b` 不是響應(yīng)式的
對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性夜涕。但是犯犁，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。例如女器，對(duì)于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一個(gè)新的 age 屬性到嵌套的 userProfile 對(duì)象：
Vue.set(vm.userProfile, 'age', 27)
你還可以使用 vm.$set 實(shí)例方法酸役，它只是全局 Vue.set 的別名：
vm.$set(vm.userProfile, 'age', 27)
有時(shí)你可能需要為已有對(duì)象賦予多個(gè)新屬性，比如使用 Object.assign() 或 _.extend()驾胆。在這種情況下涣澡，你應(yīng)該用兩個(gè)對(duì)象的屬性創(chuàng)建一個(gè)新的對(duì)象。所以丧诺，如果你想添加新的響應(yīng)式屬性入桂，不要像這樣：
Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你應(yīng)該這樣做：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
原文：https://blog.csdn.net/wu_xianqiang/article/details/80285944
