Vue响应式

1. 向响应式的数组或者对象中修改已有的属性的方法

   当想要修改对象或者属性，并非新增属性时，一个已经在 data 中声明过的响应式数据，可以直接操作改变，数据改变会经过上图的步骤，触发视图改变。直接obj.xxx = xxx 即可，数组除外，但是后台传过来的 json 数组，数组中嵌套的对象也可以直接修改数组中的对象，因为 Object.defindeProperty 的缺陷导致无法监听数组的变动，但始终会深度遍历data中数据，给数组中嵌套的对象添加上 get 和 set 方法，完成对对象的监听。所以数组中嵌套的对象的情况是****可以直接修改数组中的对象，并且保持响应式。

2. 向响应式的数组或者对象中新增一个响应式的属性的方法this.$set()或者数组变异方法

   即使是一个后台传过来的 json 数组，也可以使用this.$set向数组中的其中一个对象中添加一个响应式的属性，例如this.$set(arr[0], ‘xxx’, xxx) 。或者使用数组变异方法例如splice，更多数组变异方法可以参考vue文档。

3. data中声明过的数组或者对象，整体替换数组或者对象保持响应式

   向响应式的数组和对象替换为新的响应式数据，可直接复制，因为data中声明的数据已经添加了访问器属性setter，当重新赋值一个新的堆内存地址时，该数组或者对象也会被循环遍历添加访问器属性，所以也是有响应式的。

\4. vue无法监听对象的新增和删除，直接通过obj.xxx = xxx新增一个没有的属性，同时修改当前组件的一个响应式的数据，会重新触发当前组件重新render，可以让非响应式数据也保持更新状态（并非响应式） 。

​ 给一个数据添加一个非响应式的数据，例如一个已经在data中声明过的数据obj，obj.xxx=xxx,新增一个原本没有的数据，同时修改组件中一个其他的响应式数据，该obj也会同步更新到最新的数据，另一种情况，当你向一个对象或者数组中同时增加一个响应式和非响应式数据，非响应式数据也会同步更新到页面。

总结：只要触发当前组件重新render,就可以让数据保持更新的状态，例如this.$forceUpdate()。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LHpiow1F-1580656201044)(https://img2018.cnblogs.com/blog/1402448/201909/1402448-20190905154330369-719459427.png)]

为什么vue不能监听数组的变化？

Object.defindProperty虽然能够实现双向绑定了，但是还是有缺点，只能对对象的属性进行数据劫持，所以会深度遍历整个对象，不管层级有多深，只要数组中嵌套有对象，就能监听到对象的数据变化无法监听到数组的变化，Proxy就没有这个问题，可以监听整个对象的数据变化，所以用vue3.0会用Proxy代替definedProperty。

最后实现一个数据双向绑定原理