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

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

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

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

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

有三種解決方案：

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}}

數據

上海

北京

天津

• {{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;

}

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

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

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

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

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

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

//以下這種方式可以刪除屬性，同時會觸發數據響應式的更新

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。