1. 程式人生 > >修改陣列中的變數,無法立馬觸發檢視更新(三種解決方案)

修改陣列中的變數,無法立馬觸發檢視更新(三種解決方案)

第一:使用$set.

直接給student賦值操作,雖然可以新增屬性,但是不會觸發檢視更新

mounted () {
this.student.age = 24
}
原因是:受 ES5 的限制,Vue.js 不能檢測到物件屬性的新增或刪除。因為 Vue.js 在初始化例項時將屬性轉為 getter/setter,所以屬性必須在 data 物件上才能讓 Vue.js 轉換它,才能讓它是響應的。

要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發檢視更新。

錯誤寫法:this.$set(key,value)(ps: 可能是vue1.0的寫法)

mounted () {
this.$set(this.student.age, 24)
}
正確寫法:this.$set(this.data,”key”,value’)

mounted () {
this.$set(this.student,"age",

 

第二種:用ES6的物件.assign更新物件

Object.assign方法用於物件的合併,將源物件( source )的所有可列舉屬性,複製到目標物件( target )


第三種:用強制重新整理$forceUpdate()

新增this.$forceUpdate();進行強制渲染,效果實現。搜尋資料得出結果:因為資料層次太多,render函式沒有自動更新,需手動強制重新整理。