官文文档
image.png
image.png
对象更改检测注意事项
image.png
image.png
自己的测试：
<div class="test">
Name: {{testObj.name }}
hobby: {{ testObj.hobby }}
</div>
created () {
this.testObj.hobby = '篮球'
}
有时候我们直接使用this.testObj.hobby = '篮球'也可以成功的原因，在于它是在视图渲染之前（比如上面的例子的结果如下）就将这个添加了属性并赋值，然而这实际上是一种假象，因为这样是不能做是没有办法做到响应式的。
image.png
但是如果将添加属性和赋值的操作放在mounted中，会怎样呢？？？
mounted () {
this.testObj.hobby = '篮球'
}
image.png
可以看到是没有效果出来的，再看下面的例子，同样在created中
created () {
this.testObj.hobby = '篮球'
setTimeout(() => {
this.testObj.hobby = '排球'
}, 0)
}
结果还是篮球，也就是说最后修改了属性的值是没有反映在视图上的
image.png
解决方法
但是我们采用其他方法呢？比如官方文档说的vm.$set
created () {
this.$set(this.testObj, 'hobby', '自行车')
setTimeout(() => {
this.testObj.hobby = '排球'
}, 0)
}
image.png
这个时候的结果就是排球了，说明这个时候才是真正的响应式
其他的方法：
使用Object.assign()
created () {
this.testObj = Object.assign({}, this.testObj, { 'hobby': '单车' })
setTimeout(() => {
this.testObj.hobby = '排球'
}, 0)
}
image.png
