1、劃重點了:Vue 不能檢測到對象屬性的添加或刪除
官網——深入響應式原理(https://cn.vuejs.org/v2/guide...)中介紹到:受現代 JavaScript 的限制 (以及廢棄 Object.observe),Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程,所以屬性必須在 data 對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應的。
var vm=new Vue({
data:{
a:1
}
})
// 'vm.a'是響應的
// ‘vm.b’是非響應的
上面的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實例:
<template> <div class="parent"> <h1 v-show="mainData.test.boolean">{{msg}}</h1> <button @click="getData">數據</button> <select name="" id="" @change="selectChange"> <option value="001">上海</option> <option value="002">北京</option> <option value="003">天津</option> </select> <ul> <li v-for="(item,index) in list" :key="index" v-show="index < 10"> <span class="red">{{item.id}}</span> <strong class="blue">{{item.title}}</strong> </li> </ul> </div> </template> <script> 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); } } }; </script> <style scoped> ul li { border: 1px solid #ddd; margin-bottom: 10px; text-align: left; } .red { color: red; } .blue { color: blue; } </style>
實現的效果如下:(使用的方案二方法)
(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這種方法不能響應式更新視圖層。