15 分钟掌握vue-next响应式原理

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 是更提倡的方式。

触发响应

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

function(target, key: string, value, receiver) {
    const result = Reflect.set(target, key, value, receiver);
    if (effectMap.has(key)) {
     effectMap.get(key).forEach(effect => effect());
    }
    return result;
}

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