vue $set
阿新 • • 發佈:2018-05-19
activit ejs true 正常 pro setter vuejs PE 深入
problem:
vue 項目中經常遇到一些需要改變 table 的某項數據,或者往 table 中 增刪改 某些數據(諸如此類在 created 周期後改變已經初始化的 值)
操作結束後發現 頁面根本就不能正常渲染
reason:
受現代 JavaScript 的限制 (以及廢棄 Object.observe
),Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter
轉化過程,
所以屬性必須在 data
對象上存在才能讓 Vue 轉換它,這樣才能讓它是響應的.。 (詳情見 VUE 深入響應式原理)
Demo:
// 偽 code
var arr = [ {name:‘peter‘,age:18} ] this.data_arr = arr this.data_arr[0].age = 100
這段代碼想 改變 數組中 peter 的 age,但是如果是在 created 周期後改變,頁面可能無法正常渲染
我們可以這麽幹:
this.$set( this.data_arr[0],"age",20 ) , 具體操作數組和對象的方法如下:
then, 數組會變化,頁面會正常渲染,操作非常友好。
以上 ~ 88
vue $set