Vue2和Vue3响应式实现上的区别

Vue2是通过 Object.defineProperty来完成响应式处理，遍历对象所有的property，并将其转化getter/setter。

它是只能针对object实现响应式，对于数组，则需要进行处理。

创建Object.create(Array.prototype) 得到具有数组原型对象。

优点：基于ES5实现，支持绝大部分浏览器

缺点：由于是递归实现监听，如果数据层级较多，会导致初始化时间过长，而且原生不支持监听数组，对象中新增的key无法获取相应性，通过数组下标改变数据时，也无法触发响应式，可通过 $set重新绑定，恢复响应性。

 

Vue3有两种相应方式：值类型响应式和复杂类型响应式

1、值类型响应式比较简单，直接对该对象设置set和get的方法（ref），获取value。

2、复杂类型响应式是通过使用Proxy和Reflect来完成的响应式处理，也是出来set和get。

优点：速度快，只有get数据是才会添加响应式，不用初始化时深层次递归，可以检测到代理对象属性的动态添加和删除，可以检测到数组的下标和length属性的改变。

缺点：ES6的proxy语法对低版本浏览器不支持，如IE11