最新 vue-next 的源码发布了，虽然是 pre-alpha 版本，但这时候其实是阅读源码的比较好的时机。在 vue 中，比较重要的东西当然要数它的响应式系统，在之前的版本中，已经有若干篇文章对它的响应式原理和实现进行了介绍，这里就不赘述了。在 vue-next 中，其实现原理和之前还是相同的，即通过观察者模式和数据劫持，只不过对其实现方式进行了改变。
对于解析原理的文章，我个人是比较喜欢那种“小白”风格的文章，即不要摘录特别多的代码，也不要阐述一些很深奥的原理与概念。在我刚接触 react 的时候，还记得有一篇利用 jquery 来介绍 react 的文章，从简入繁，面面俱到，其背后阐述的知识点对我后来学习 react 起到很多的帮助。
因此，这篇文章我也打算按这种风格来写一下利用最近空闲时间阅读 vue-next 响应式模块的源码的一些心得与体会，算是抛砖引玉，同时实现一个极简的响应式系统。
如有错误，还望指正。
预备知识
无论是阅读这篇文章，还是阅读 vue-next 响应式模块的源码，首先有两个知识点是必备的：
Proxy：es6 中新的代理内建工具类
Reflect：es6 中新的反射工具类
由于篇幅有限，这里也不详细赘述这两个类的用途与使用方法了，推荐三篇我认为不错的文章，仅供参考：
接口
对于 vue-next 响应式系统的 RFC，可以参考这里。虽然距离现在有一段时间了，但是通过阅读源码，可以发现一些影子。
我们大体要实现的效果如下面的代码所示：
// 实现两个方法 reactive 和 effect const state = reactive({ count: 0 }) effect(() => { console.log('count: ', state.count) }) state.count++ // 输入 count: 1
可以发现我们熟悉的依赖收集阶段（同时也是观察者模式的订阅过程），是在 effect 中进行的，依赖收集的准备工作（即数据劫持逻辑），是在 reactive 中进行的，而数据变化的触发响应的逻辑在后面的 state.count++ 代码执行时进行（同时也是观察者模式的发布过程），之后便会执行之前传入 effect 内部的回调函数并输入 count: 1。
类型与公共变量
由于 vue-next 用 ts 进行了重写，这里我也使用 ts 来实现这个极简版本的响应式系统。主要涉及到的类型和公共变量如下：
type Effect = Function; type EffectMap = Map<string, Effect[]>; let currentEffect: Effect; const effectMap: EffectMap = new Map();
currentEffect：用来储存当前正在收集依赖的 effect
effectMap：代表目标对象每个 key 所对应的依赖于它的 effect 数组，也可以把它理解为观察者模式中的订阅者字典
利用 Proxy 实现数据劫持
在之前的版本中，vue 利用 Object.defineProperty 中的 setter 和 getter 来对数据对象进行劫持，vue-next 则通过 Proxy。众所周知，Object.defineProperty 所实现的数据劫持是有一定限制的，而 Proxy 就会强大很多。
首先，我们在脑后中，设想一下如何使用 Proxy 来实现数据劫持呢？很简单，大体结构如下所示：
export function reactive(obj) { const proxied = new Proxy(obj, handlers); return proxied; }
这里的 handlers 是声明如何处理各个 trap 的逻辑，比如：
const handlers = { get: function(target, key, receiver) { ... }, set: function(target, key, value, receiver) { ... }, deleteProperty(target, key) { ... } // ...以及其他 trap }
由于这里是极简版本的实现，那么我们就仅仅实现 get 和 set 两个 trap 就可以了，分别对应依赖收集和触发响应的逻辑。
依赖收集
对于依赖收集的实现，由于是极简版本，实现的前提如下：
不考虑对象的嵌套
不考虑集合类型
不考虑基础类型
不考虑对代理对象的处理
哈哈，基本这四点排除之后，这个依赖收集函数就会很轻很薄，如下：
function(target, key: string, receiver) { // 仅仅在某个 effect 内部进行依赖收集 if (currentEffect) { if (effectMap.has(key)) { const effects = effectMap.get(key); if (effects.indexOf(currentEffect) === -1) { effects.push(currentEffect); } } else { effectMap.set(key, [currentEffect]); } } return Reflect.get(target, key, receiver); }
实现的逻辑很简单，其实就是观察者模式中注册订阅者的实现逻辑，值得注意的是，这里对于 target 的赋值逻辑，我们委托给 Reflect 来完成，虽然 target[key] 也是可以工作的，但是使用 Reflect 是更提倡的方式。
触发响应
触发响应的逻辑就比较简单了，其实是对应观察者模式中，发布事件的逻辑，如下：