什么是数据响应式？

const vm =newVUE({data:{n:0}})

上面的代码中，如果修改vm.n，那么UI中的n就会通过变化来响应我，这就是数据响应式。

VUE对data做了什么？

当给一个vue实例传入data的时候，vue内部会对传入的data添加监听和代理。

大概工作原理为：

1. 传入data
2. vue把原本的data用一个newdata保存下来
3. newdata中的属性会替换掉原来的data，（监听过程）
4. 修改data值
5. 由于data已经被监听，实际上修改的是newdata的内容
6. newdata会把修改后的数据传给data（代理过程）
7. 最后把结果返回给vm

怎么做到监听和代理？

使用Object.defineProperty可以给对象添加属性和getter/setter来监控数据的读写。具体使用方法：

修改了原来data中不包含的key怎么办？

由于这个key没有被VUE监听，不能正常的更新UI。

VUE提供了一个方法来添加新的key，使用Vue.set或者this.$set来新增key，例如：

this.$set(this.object, 'newkey', 100)

data中有数组呢？

如果data中包含数组，我们又想把新数据插入数组怎么办？我们不能提前声明好所有的key，一个个set又太麻烦。这可如何是好？

VUE篡改了数组的API，直接调用这些被改动过的API就会更新UI，具体如下：

以上就是我在学习过程中理解的VUE的数据响应式，观点仅供参考，如有错误欢迎指正。