前言

在Vue开发中，我们知道Vue的响应式原理是通过Object.defineProperty对数据进行劫持, 并结合发布订阅者模式实现。Vue 利用Object.defineProperty 创建一个 observe 来劫持监听对象里每一个属性，把这些属性全部转为getter 和 setter。Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

但是为什么有时候我们给对象不存在的 Key 进行赋值 / 给对象后续新增的 Key 进行赋值 不是响应式的呢？

因为Vue的响应式原理 bject.defineProperty 递归劫持的是对象里面的每一个属性，组件实例一旦被创建完毕，数据劫持的操作已经完事了，后续添加的就没有被劫持到。

解决方法 (方法一：this.$set )

使用this.$set 方法。 this.$set(对象,key,value)

解决方法 (方法二：Vue.set)

使用Vue.set 方法。

解决方法 (方法三：this.$forceUpdate() )

使用数组this.$forceUpdate() 强制更新方法。

追加问题 ( 删除对象里面的某一个属性，也不是响应式的？)

删除是因为Vue响应式原理 0bject.defineProperty 本身就不支持对删除数据的劫持。