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