1. 程式人生 > >vue $set

vue $set

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