原文地址

---

在開發(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。