Vue2.0 和Vue3.0响应式原理分析

一、Vue2.0响应式架构图    

vue2.0响应式原理图

---

二、Vue2.0响应式实现核心步骤

1.observe(data)

如上图所示，observe函数所做的工作就是遍历data的每一个属性，对这些属性依次做响应式处理

2.defineProperty(data,key,handler）

而所谓的响应式处理，则是拦截属性的get、set方法做订阅-发布处理。订阅-发布处理，就是在属性被调用的使用，触发get代理函数，订阅调用该属性的组件(将组件存放到一个订阅者数组中进行保存，这里的Dep.target暂时可以理解为一个全局变量，代表着的是当前正在渲染的Vue组件)。 而在属性被修改时，触发set代理函数，在set代理函数里，通知订阅者数组里面的每一个订阅者（组件）进行视图更新。

3.Dep

上文中提到的Dep，是一个依赖类，将它理解成一个订阅者。当对一个属性进行响应式处理的时候，就会实例化一个Dep实例，并将用到这个属性的组件全部存放在subs数组里。当属性被修改时，则通知subs数组里的所有组件进行更新。

4.Watcher

上面我们说到，dep.subs里面存的是用到该属性的组件，这个说法实际上不完全对。准确来说，dep.subs里面存的是用到该属性的组件所对应的一个Watcher实例。什么是Watcher？每一个组件在渲染之前，会对其自身的template模版进行解析编译，生成一个render函数（用于创建虚拟dom）。然后，会实例化一个Watcher对象，在实例化的过程中，会将之前生成的render函数作为参数传入进去执行。而在执行render的过程中，势必会触发相应属性的get函数，将这个watcher实例添加到相应属性的订阅者数组subs当中。等这些属性进行被修改时，就会通知这个watcher，再次调用这个watcher里面的render函数，进行虚拟dom的diff和更新。

三、Vue2.0响应式原理的不足

1.动态添加响应式属性必须用Vue.set

2.直接操作数组索引无法触发视图更新

3.数据的响应式处理和视图未完全解耦

四、Vue3.0响应式原理核心步骤

1.reactive(data)

2.Proxy(data,handler)

从上图代码可以看出，Vue3.0响应式相对于Vue2.0的最大区别在于用到了es6中的方法Proxy。这个方法不需要循环遍历data的每个属性，对每个属性都做一遍响应式处理。而是直接代理了整个data对象，拦截这个对象所包含的所有属性的get、set方法。这么做的好处:

1.就是在我们动态为data添加一个属性时，不用做任何处理，这个属性就已经是响应式的了。

2.数组的任何操作也都可以触发响应。

3.effect(fn)

上面的设计，其实已经解决了Vue2.0的前两个不足。而为了解决第三个不足， Vue3.0提出了effect函数，其用法如下：

当我们调用effect执行某个函数时，首先会执行一次这个函数。之后每次obj.name修改时，执行一次该函数。那么effect是怎么实现这个功能的？

我们来看这个effect函数做了什么？简单来说，effect会先将传入的回调函数保存起来，然后第一次执行cb(),在执行的过程中，触发了obj.name属性的get代理函数，在代理函数里面做订阅track(target), 而track函数则会将存在全局数组中的cb函数取出来，保存在map中,类似于map.set('name',cb)。之后，在name属性被修改的时候，会触发name属性的set代理函数，在代理函数里面执行trigger。最后，trigger会将之前存在map里的订阅着取出来执行，map.get('name')()

五、Vue3.0响应式原理框架图

由图中我们看出，Vue3.0响应式框架在设计上，将视图渲染和数据响应式完全分离开来。将响应式核心方法effect从原有的Watcher中抽离。这样，当我们只需要监听数据响应某种逻辑回调(例如监听某个text属性的变化，对他进行正则校验等。)，而不需要更新视图的时候，完全可以只从effect触发，屏蔽左边的视图渲染。