Vue中更改物件檢測注意事項

官文文件

物件更改檢測注意事項

自己的測試：

<div class="test">
  Name: {{testObj.name }}
  hobby: {{ testObj.hobby }}
</div>

    created () {
      this.testObj.hobby = '籃球'
    }

有時候我們直接使用this.testObj.hobby = '籃球'也可以成功的原因，在於它是在檢視渲染之前（比如上面的例子的結果如下）就將這個新增了屬性並賦值，然而這實際上是一種假象，因為這樣是不能做是沒有辦法做到響應式的。

但是如果將新增屬性和賦值的操作放在mounted中，會怎樣呢？？？

    mounted () {
      this.testObj.hobby = '籃球'
    }

可以看到是沒有效果出來的，再看下面的例子，同樣在created中

    created () {
      this.testObj.hobby = '籃球'
      setTimeout(() => {
        this.testObj.hobby = '排球'
      }, 0)
    }

結果還是籃球，也就是說最後修改了屬性的值是沒有反映在檢視上的

解決方法
但是我們採用其他方法呢？比如官方文件說的vm.$set

    created () {
      this.$set(this.testObj, 'hobby', '自行車')
      setTimeout(() => {
        this.testObj.hobby = '排球'
      }, 0)
    }

這個時候的結果就是排球了，說明這個時候才是真正的響應式

其他的方法：
使用Object.assign()

    created () {
      this.testObj = Object.assign({}, this.testObj, { 'hobby': '單車' })
      setTimeout(() => {
        this.testObj.hobby = '排球'
      }, 0)
    }