Vue 不能檢測到對象屬性的添加或刪除

1、劃重點了：Vue 不能檢測到對象屬性的添加或刪除

官網(wǎng)——深入響應(yīng)式原理(https://cn.vuejs.org/v2/guide...)中介紹到：受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。

上面的a是響應(yīng)式的，所以a的改變后會自動渲染頁面；

但是b是在vm實例創(chuàng)建之后添加的屬性，所以他不是響應(yīng)式的，當(dāng)我們改變b的值的時候，通過DevTool看到的數(shù)據(jù)并不會改變，除非我們在DevTool中刷新數(shù)據(jù)，而且頁面也不會刷新。

有三種解決方案：

var vm = new Vue{

el: "#app",

data:{

obj:{

name: "aaa"

}

}

}

1、方案一：利用Vue.set(object,key,value)

Vue.set(vm.obj,"sex","man")

2、方案二：利用this.$set(this.object,key,value)

this.$set(this.obj,"sex","man")

3、方案三：利用Object.assign({},this.obj)

this.obj.sex = "man";

this.obj = Object.assign({},this.obj)

//或者下面方式

this.obj = Object.assign({},this.obj,{"sex","man"})

DEMO實例：

{{msg}}

數(shù)據(jù)

上海

北京

天津

• {{item.id}}

  {{item.title}}

export default {

name: "Parent",

data() {

return {

count: 10,

size: 1024,

mainData: {

test: {

aa: 12

}

},

msg: "這是測試信息",

list: []

};

},

methods: {

getData: function() {

var self = this;

this.$axios.get("http://jsonplaceholder.typicode.com/posts").then(rsp => {

self.list = rsp.data;

self.$set(self.mainData.test, "boolean", false);

});

},

selectChange: function() {

var self = this;

self.$set(self.mainData.test, "boolean", true);

}

}

};

ul li {

border: 1px solid #ddd;

margin-bottom: 10px;

text-align: left;

}

.red {

color: red;

}

.blue {

color: blue;

}

實現(xiàn)的效果如下：(使用的方案二方法)

(1)、下拉框選項改變的時候，會顯示“這是測試信息“文字

(2)、點擊”數(shù)據(jù)“按鈕，獲取數(shù)據(jù)，“這是測試信息“文字會隱藏

2、劃重點了：刪除vue實例的屬性

注意：Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上。

對于上述Demo實例中通過this.$set添加的屬性，通過以下方式刪除即可：

//以下這種方式可以刪除屬性，同時會觸發(fā)數(shù)據(jù)響應(yīng)式的更新

this.$delete(this.mainData.test, "boolean");

//而通過delete this.mainData.test.boolean這種方法不能響應(yīng)式更新視圖層。

總結(jié)

以上是生活随笔為你收集整理的vue检测对象值_Vue 不能检测到对象属性的添加或删除，注意！！！的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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