vue3.0的proxy响应式原理简单实现

vue3.0监测机制有了很大的改善，弥补了vue2.0
的一些局限：

• 对属性的添加、删除动作的监测；
• 对数组基于下标的修改、对于 .length 修改的监测；
• 对 Map、Set、WeakMap 和 WeakSet 的支持；

这里为了更好的理解原理手动实现vue3.0的监测对象属性变化的Demo（实际源码中还需考虑map, set等数据类型，这里仅用普通对象为例）

vue3.0 使用proxy代替了vue2.0版本中的defineProperty，首先利用compositionAPI中的 reactive() 函数返回一个proxy对象，使得数据可监测

// reactive() 函数接受一个普通对象 返回一个响应式数据对象
function reactive(target) {
  // 通过proxy将对象变为响应式
  const observed = new Proxy(target, baseHandler);
  //  返回proxy代理后的对象
  return observed;
}

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写

var proxy = new Proxy(target, handler);

target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

baseHandler中定义拦截的get set方法，监测和改写数据，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。

Proxy 与Reflect 组合使用，Proxy拦截用户对目标对象的访问， 而实际对数据的操作由Reflect来完成

Reflect

Reflect对象与Proxy对象一样，是ES6为了操作对象而提供的新API ，Reflect不能执行new指令。

Reflect作用：优化Object的一些操作方法以及合理的返回Object操作返回的结果。

const baseHandler = {
 get(target, key) {
   // Reflect.get
   const res = Reflect.get(target, key);
   // @todo 依赖收集
   // 尝试获取值obj.age，触发getter
   track(target, key);
   return typeof res === "object" ? reactive(res) : res;
 },
 set(target, key, val) {
   const info = { oldValue: target[key], newValue: val };
   // Reflect.set
   // target[key] = val;
   const res = Reflect.set(target, key, val);
   // @todo 响应式去通知变化 触发执行，effect函数是响应式对象修改触发的
   trigger(target, key, info);
 },
};

track() 函数用来收集依赖，将所有 get 的 target 跟 key 以及 effect 建立起对应关系，使用一个全局的 WeakMap 类型变量 targetMap 来存储 target，还需要一个全局的数组来存储 effect

effect是副作用的意思，也就是说它是响应式副产品，每次触发了 get 时收集effect，每次set时在触发这些effects，这样就可以做一些响应式数据之外的一些事情了，比如计算属性computed

function track(target, key) {
  const effect = effectStack[effectStack.length - 1];
  if (effect) {
    let depMap = targetMap.get(target);
    if (depMap === undefined) {
      depMap = new Map();
      targetMap.set(target, depMap);
    }
    let dep = depMap.get(key);
    if (dep === undefined) {
      dep = new Set(); // key去重
      depMap.set(key, dep);
    }
    // 以上为容错 target key
    if (!dep.has(effect)) {
      // 新增依赖
      // 双向存储，方便查找优化
      dep.add(effect);
      effect.deps.push(dep);
    }
  }
}

trigger() 函数用来通知订阅者，更新数据，执行effect，普通的effect和computed有优先级，effect先执行，computed后执行，因为 computed 可能会依赖普通的 effect

function trigger(target, key, info) {
  //1.找到依赖
  const depMap = targetMap.get(target);
  if (depMap === undefined) {
    // 没有依赖直接return
    return;
  }
  // 区分普通的effect和computed有优先级，effect先执行，computed后执行
  // 因为 computed 可能会依赖普通的 effect
  const effects = new Set();
  const computedRunners = new Set();
  if (key) {
    let deps = depMap.get(key);
    deps.forEach((effect) => {
      if (effect.computed) {
        computedRunners.add(effect);
      } else {
        effects.add(effect);
      }
    });
    // 拆开执行
    effects.forEach((effect) => effect());
    computedRunners.forEach((computed) => computed());
  }
}

Demo的github地址：https://github.com/lihel/proxy-demo