Vue —$set

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

如下程式碼，給 student物件新增 age 屬性

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

mounted () { // ——鉤子函式，例項掛載之後
    this.student.age = 24
}
 

原因是：受 ES5 的限制，Vue.js 不能檢測到物件屬性的新增或刪除。因為 Vue.js 在初始化例項時將屬性轉為 getter/setter，所以屬性必須在 data 物件上才能讓 Vue.js 轉換它，才能讓它是響應的。

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

但是，值得注意的是，網上一些資料寫的$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)
}