解决vue修改对象时，视图不同步的问题

我们先来看一段代码

<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)用于删除对象的属性