tcp工具类回调响应_只需要15分钟，掌握Vue-next响应式原理

前言

最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响应式系统，在之前的版本中，已经有若干篇文章对它的响应式原理和实现进行了介绍，这里就不赘述了。在 vue-next 中，其实现原理和之前还是相同的，即通过观察者模式和数据劫持，只不过对其实现方式进行了改变。

对于解析原理的文章，我个人是比较喜欢那种“小白”风格的文章，即不要摘录特别多的代码，也不要阐述一些很深奥的原理与概念。在我刚接触 react 的时候，还记得有一篇利用 jquery 来介绍 react 的文章，从简入繁，面面俱到，其背后阐述的知识点对我后来学习 react 起到很多的帮助。

因此，这篇文章我也打算按这种风格来写一下利用最近空闲时间阅读 vue-next 响应式模块的源码的一些心得与体会，算是抛砖引玉，同时实现一个极简的响应式系统。

如有错误，还望指正。

一、预备知识

无论是阅读这篇文章，还是阅读 vue-next 响应式模块的源码，首先有两个知识点是必备的：

• Proxy：es6 中新的代理内建工具类
• Reflect：es6 中新的反射工具类

由于篇幅有限，这里也不详细赘述这两个类的用途与使用方法了，推荐三篇我认为不错的文章，仅供参考：

• ES6 Proxies in Depth
• ES6 Proxy Traps in Depth
• ES6 Reflection in Depth

二、接口

对于 vue-next 响应式系统的 RFC，可以参考这里。虽然距离现在有一段时间了，但是通过阅读源码，可以发现一些影子。

我们大体要实现的效果如下面的代码所示：

可以发现我们熟悉的依赖收集阶段(同时也是观察者模式的订阅过程)，是在 effect 中进行的，依赖收集的准备工作(即数据劫持逻辑)，是在 reactive 中进行的，而数据变化的触发响应的逻辑在后面的 state.count++ 代码执行时进行(同时也是观察者模式的发布过程)，之后便会执行之前传入 effect 内部的回调函数并输入 count: 1。

三、类型与公共变量

由于 vue-next 用 ts 进行了重写，这里我也使用 ts 来实现这个极简版本的响应式系统。主要涉及到的类型和公共变量如下：

• currentEffect：用来储存当前正在收集依赖的 effect
• effectMap：代表目标对象每个 key 所对应的依赖于它的 effect 数组，也可以把它理解为观察者模式中的订阅者字典

四、利用 Proxy 实现数据劫持

在之前的版本中，vue 利用 Object.defineProperty 中的 setter 和 getter 来对数据对象进行劫持，vue-next 则通过 Proxy。众所周知，Object.defineProperty 所实现的数据劫持是有一定限制的，而 Proxy 就会强大很多。

首先，我们在脑后中，设想一下如何使用 Proxy 来实现数据劫持呢？很简单，大体结构如下所示：

这里的 handlers 是声明如何处理各个 trap 的逻辑，比如：

由于这里是极简版本的实现，那么我们就仅仅实现 get 和 set 两个 trap 就可以了，分别对应依赖收集和触发响应的逻辑。

1.依赖收集

对于依赖收集的实现，由于是极简版本，实现的前提如下：

• 不考虑对象的嵌套
• 不考虑集合类型
• 不考虑基础类型
• 不考虑对代理对象的处理

哈哈，基本这四点排除之后，这个依赖收集函数就会很轻很薄，如下：

实现的逻辑很简单，其实就是观察者模式中注册订阅者的实现逻辑，值得注意的是，这里对于 target 的赋值逻辑，我们委托给 Reflect 来完成，虽然 target[key] 也是可以工作的，但是使用 Reflect 是更提倡的方式。

2.触发响应

触发响应的逻辑就比较简单了，其实是对应观察者模式中，发布事件的逻辑，如下：

同样，这里使用 Reflect 来对 target 进行赋值操作，因为它会返回一个 boolean 值代表是否成功，而 set 这个 trap也需要代表相同含义的值。

3.通过 reactive 方法来初始化代理对象

实现了数据劫持的代理逻辑之后，我们只需要在 reactive 这个方法中，返回一个代理对象的实例即可，还记的上文中我们在实现之前脑海中浮现的大致代码框架吗？

如下：

五、依赖收集的准备工作

上文中提到了，对于依赖收集的工作，我们是有条件地进行的，即在一个 effect 中，我们才会进行收集，其他情况下的取值逻辑，我们则不会进行依赖收集，因此，effect 方法正式为了实现这点而存在的，如下：

之所以实现如此简单，是因为我们这里是极简版本，不需要考虑诸如 readOnly 、异常以及收集时机等因素。可以发现，就是将传入的回调函数包裹在另一个方法中，然后将这个方法用 currentEffect 这个变量暂存，之后尝试运行一下即可。当 effect 运行完毕之后，再将 currentEffect 置空，这样就可以达到只在 effect 下进行依赖收集的目的。

最后

这个极简的响应式系统虽然能用，但是有很多未考虑的因素，其实就是在上文中被我们忽略的那些前提条件，这里再列举一下，并给出源代码中的解法：

• 基础数据类型的处理：可以将基础数据类型封装为一个 ref 对象，其 value 指向基础数据类型的值
• 嵌套对象：递归进行执行代理过程即可
• 集合对象：编写专门的 trap 处理逻辑
• 代理实例：缓存这些代理实例，下次遇到直接返回即可

但我仍然推荐你直接去阅读一下源码，因为你会发现，源码会在这个极简版本基础上，利用了更加复杂数据结构以及流程，来控制依赖收集和触发响应的流程，同时各种特殊情况也有更加明细的考虑。

想了解更多前端知识欢迎评论区留言或私信我！

欢迎关注公众号：fkdcxy 疯狂的程序员丶 获取更多前端教程！