官文文檔

image.png

image.png

對象更改檢測注意事項(xiàng)

image.png

image.png

自己的測試：

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

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

有時候我們直接使用this.testObj.hobby = '籃球'也可以成功的原因，在于它是在視圖渲染之前（比如上面的例子的結(jié)果如下）就將這個添加了屬性并賦值，然而這實(shí)際上是一種假象，因?yàn)檫@樣是不能做是沒有辦法做到響應(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