Vue —$set

在我們使用vue進行開發的過程中，可能會遇到一種情況：當生成vue例項後，當再次給資料賦值時，有時候並不會自動更新到檢視上去；
當我們去看vue文件的時候，會發現有這麼一句話：如果在例項建立之後新增新的屬性到例項上，它不會觸發檢視更新。
如下程式碼，給 student物件新增 age 屬性

data () {
  return {
    student: {
      name: '',
      sex: ''
    }//歡迎加入全棧開發交流圈一起學習交流：864305860
  }//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力
mounted () { // ——鉤子函式，例項掛載之後
  this.student.age = 24
}
 

受 ES5 的限制，Vue.js 不能檢測到物件屬性的新增或刪除。因為 Vue.js 在初始化例項時將屬性轉為 getter/setter，所以屬性必須在 data 物件上才能讓 Vue.js 轉換它，才能讓它是響應的。
要處理這種情況，我們可以使用 $set\left(\right)\mathrm{方}$

法 ， 既 可 以 新 增 屬 性 , 又 可 以 觸 發 視 圖 更 新 。 錯 誤 寫 法 ： t h i s . 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", 24)
}

結語

感謝您的觀看，如有不足之處，歡迎批評指正。