响应式原理2.0和3.0对比

一、Vue2.0 vue 如何实现 响应式原理

 

 

 

注意点：

     1、如果data的属性是一个对象，那么就必须在defineReactive方法去调用一下Observer（value） 递归一下。

     2、你在后面改这个data的值的时候，你改的值可能也是一个对象，所以你在set方法里面也要对新改的值调用Observe(newValue)

 

如果data中的某个属性是数组，那么你在后面往这个数组里面push一个数据，会是响应式的么？答案是不会，因为数组的这些方法没有响应式的功能。所以我们还要做一件事，还要对数组上的方法进行重写。

 

注解：1、 创建一个proto，让它继承数组原型上的方法

          2、 遍历能改变数组的所有方法，然后让对应proto里的所有该方法首先去更新试图，然后去调数组原型上的方法，用call将方法里的this改成当前上下文的this

二、Vue3.0 vue 如何实现 响应式原理

对对象的处理

注解：1、解决了vue2.0一上来就递归的问题，vue3.0是有需要才递归，在get方法中的返回值判断是对象才去递归，提高了性能。

          2、proxy数组也同样能代理，并不需要重写数组上的方法。

 

注需要解决的问题，1、重复代理原对象   2、重复代理被代理过的对象

 

proxy缺点：兼容性差  ie11不兼容

 

对数组的处理：

push方法会做两件事：

    1、往原有数组添加一个4

    2、length+1

这两件事都会触发两次set，那么就会更新视图两次。所以我们要屏蔽掉改length这次操作。

怎么判断是添加属性还是增加length呢？

方法就是判断这个属性以前有没有，通过key判断。