我們先來看一段代碼

<p>{{testObj.a}}</p>
...
data () {
    return {
        testObj: { a: 1 }
    }
},
methods: {
    changeVal () {
          this.testObj.a = 2
          console.log(this.testObj.a)  //2
    }
}

在執行changeVal方法后，我們理想中的結果是視圖中的1變成2
而事實上這樣改變對象的屬性值,雖然可以改變它的值，卻不會觸發視圖的更新
正確的做法應該使用vue提供的全局方法Vue.set(在組件中可以使用this.$set)

<p>{{testObj.a}}</p>
...
data () {
    return {
        testObj: { a: 1 }
    }
},
methods: {
    changeVal () {
          this.$set( this.textObj, 'a', 2)
          console.log(this.testObj.a)  //2
    }
}

除此之外vue還提供Vue.delete(在組件中可以使用this.$delete)用于刪除對象的屬性