vue2.0 給data對象新增屬性，并觸發(fā)視圖更新

如下代碼，給 student對象新增 age 屬性

data () {return {student: {name: '',sex: ''}} }

直接給student賦值操作，雖然可以新增屬性，但是不會觸發(fā)視圖更新

mounted () {this.student.age = 24 }

原因是：受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。因為 Vue.js 在初始化實例時將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。

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

但是，值得注意的是，網(wǎng)上一些資料寫的$set()用法存在一些問題，導(dǎo)致在新接觸這個方法的時候會走一些彎路！

錯誤寫法：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", 24) }

總結(jié)

以上是生活随笔為你收集整理的Vue2.0 $set()的正确使用方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。