受現(xiàn)代 JavaScript 的限制(以及廢棄 Object.observe)葵陵,Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程允乐,所以屬性必須在 data
對象上存在才能讓 Vue 轉(zhuǎn)換它,這樣才能讓它是響應(yīng)的莉擒。例如:
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的
Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性(root-level reactive property)茉帅。然而它可以使用 Vue.set(object, key, value)
方法將響應(yīng)屬性添加到嵌套的對象上:
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實例方法,這也是全局 Vue.set 方法的別名:
this.$set(this.someObject,'b',2)
有時你想向已有對象上添加一些屬性肝劲,例如使用 Object.assign() 或 _.extend() 方法來添加屬性迁客。但是,添加到對象上的新屬性不會觸發(fā)更新辞槐。在這種情況下可以創(chuàng)建一個新的對象,讓它包含原對象的屬性和新的屬性:
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
也有一些數(shù)組相關(guān)的問題粘室,之前已經(jīng)在列表渲染中講過榄檬。