Vue中更改对象检测注意事项

官文文档

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