官文文檔
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 = '籃球'也可以成功的原因塑陵，在于它是在視圖渲染之前（比如上面的例子的結(jié)果如下）就將這個添加了屬性并賦值感憾，然而這實際上是一種假象，因為這樣是不能做是沒有辦法做到響應(yīng)式的令花。
image.png
但是如果將添加屬性和賦值的操作放在mounted中阻桅，會怎樣呢？兼都？嫂沉？
mounted () {
this.testObj.hobby = '籃球'
}
image.png
可以看到是沒有效果出來的，再看下面的例子扮碧，同樣在created中
created () {
this.testObj.hobby = '籃球'
setTimeout(() => {
this.testObj.hobby = '排球'
}, 0)
}
結(jié)果還是籃球趟章，也就是說最后修改了屬性的值是沒有反映在視圖上的
image.png
解決方法
但是我們采用其他方法呢？比如官方文檔說的vm.$set
created () {
this.$set(this.testObj, 'hobby', '自行車')
setTimeout(() => {
this.testObj.hobby = '排球'
}, 0)
}
image.png
這個時候的結(jié)果就是排球了慎王，說明這個時候才是真正的響應(yīng)式
其他的方法：
使用Object.assign()
created () {
this.testObj = Object.assign({}, this.testObj, { 'hobby': '單車' })
setTimeout(() => {
this.testObj.hobby = '排球'
}, 0)
}
image.png
