vue新增属性是否会响应式更新?
原文地址
在開發(fā)過程中,我們時常會遇到這樣一種情況:當(dāng)vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組(數(shù)組里邊的值是對象)時,向?qū)ο笾刑砑有碌膶傩?#xff0c;如果更新此屬性的值,是不會更新視圖的。
根據(jù)官方文檔定義:如果在實例創(chuàng)建之后添加新的屬性到實例上,它不會觸發(fā)視圖更新。
受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe),Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程,所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它,這樣才能讓它是響應(yīng)的。
看以下實例:
<template><div><p @click="addd(obj)">{{obj.d}}</p> <p @click="adde(obj)"> {{obj.e}}</p> </div> </template> <script> export default { data(){ return { obj:{} } }, mounted() { this.obj = {d: 0}; this.obj.e = 0; console.log('after--', this.obj); }, methods: { addd(item) { item.d = item.d + 1; console.log('item--',item); }, adde(item) { item.e = item.e + 1; console.log('item--',item); } } } </scirpt>?
可以看出d屬性是有g(shù)et 和 set方法的,而新增的e屬性是沒有的。
點擊觸發(fā)3次addd,點擊觸發(fā)3次adde,頁面、控制臺信息如下
?
此時觸發(fā)1次addd,效果如下:
由此可以看出,更新新增屬性e,是不會更新視圖,但是會改變其值,當(dāng)更新原有屬性d時會更新視圖,同時將新增的屬性e的值也更新到視圖里邊
解決方案
官方定義:
Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上:
Vue.set(vm.obj, 'e', 0)
您還可以使用 vm.$set 實例方法,這也是全局 Vue.set 方法的別名:
this.$set(this.obj,'e',02)
有時你想向已有對象上添加一些屬性,例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是,添加到對象上的新屬性不會觸發(fā)更新。在這種情況下可以創(chuàng)建一個新的對象,讓它包含原對象的屬性和新的屬性:
// 代替 Object.assign(this.obj, { a: 1, e: 2 })
this.obj= Object.assign({}, this.obj, { a: 1, e: 2 })
上述實例解決如下:
?
點擊觸發(fā)3次addd,點擊觸發(fā)3次adde,頁面效果及控制臺信息如下:
?
返回目錄
轉(zhuǎn)載于:https://www.cnblogs.com/gitByLegend/p/10840995.html
新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎!定制產(chǎn)品紅包拿不停!總結(jié)
以上是生活随笔為你收集整理的vue新增属性是否会响应式更新?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 对java中接口的简单理解
- 下一篇: vue js 和原生app调用回调方法问