Vue —$set

在我們使用vue進(jìn)行開發(fā)的過(guò)程中，可能會(huì)遇到一種情況：當(dāng)生成vue實(shí)例后，當(dāng)再次給數(shù)據(jù)賦值時(shí)，有時(shí)候并不會(huì)自動(dòng)更新到視圖上去；

當(dāng)我們?nèi)タ磛ue文檔的時(shí)候，會(huì)發(fā)現(xiàn)有這么一句話：如果在實(shí)例創(chuàng)建之后添加新的屬性到實(shí)例上，它不會(huì)觸發(fā)視圖更新。

如下代碼，給 student對(duì)象新增 age 屬性

data () {  return {    student: {      name: '',      sex: ''    }  }}mounted () { // ——鉤子函數(shù)，實(shí)例掛載之后  this.student.age = 24}

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

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

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

錯(cuò)誤寫法：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é)

以上所述是小編給大家介紹的Vue中的$set的使用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！