Vue响应式系统的作用与实现（一）

Vue响应式系统的作用与实现（一）

响应式系统的作用与实现（二）
响应式系统的作用与实现（三）

0.写在前面：

• 写了mini-vue之后的疑惑更多了，比如为什么要这样设计？这样做的好处是啥？为什么我想不出来？（我真菜
• 于是决定去看霍春阳大佬的Vue.js设计与实现。一些参考资料：官方的参考资料，前置知识非常有必要看一下。mini-vue的实现

1.响应式：

Vue2的响应式实现是借助 Object.defineProperty通过重写getter和setter方法来进行的数据劫持，Vue3通过Proxy代理拦截对象中任意属性的变化，通过Reflect反射对源对象的属性进行操作，然后再在get里收集依赖在set里派发更新。

2.副作用函数与响应式数据：

上面中的这句话应该都知道，那我们先来了解一下什么是副作用函数，以及它有什么用？它和响应式数据又有什么关系？

• 副作用函数：会产生副作用的函数，它的执行会直接或间接影响其他函数的执行。

举例：当一个函数修改了全局变量。

let a = 1;
function effect(){
  a = 2;
}

• 响应式数据：当值发生变化后，副作用函数会自动重新执行。

那么怎么才能让数据变成响应式数据呢？

• 我们需要对数据的读取和设置操作进行拦截，把副作用函数存储到一个"桶"中;
• 即当读取属性时将副作用函数effect添加到桶里，然后返回属性值；
• 当设置属性值时先更新原始数据，再将副作用函数从桶里取出并重新执行。

3.响应式系统的实现：

上代码前请看两个地方：

• WeakMap 由 target – > Map构成
  • 这里用WeakMap的原因：它的键是弱引用对象，防止内存泄漏。官网解释的很详细
• Map 由 key --> Set 构成

上图中Set数据结构所存储的副作用函数集合我们称为 key的依赖集合。

      // 存储副作用函数的桶
      const bucket = new WeakMap();

      // 原始数据
      const data = { text: "hello world" };
      const obj = new Proxy(data, {
        get(target, key) {
          if (!activeEffect) {
            return ;
          }
          // 根据target从桶中取得depsMap,它也是一个Map类型: key -->effects
          let depsMap = bucket.get(target);
          // 如果depsMap不存在,那么新建一个 Map 与 target关联
          if (!depsMap) {
            bucket.set(target, (depsMap = new Map()));
          }
          // 根据key从depsMap中取得 deps(对应着:key --> effects),它是一个Set类型
          let deps = depsMap.get(key);
          // 如果 deps 不存在，同样新建一个 Set 并与 key 关联
          if (!deps) {
            depsMap.set(key, (deps = new Set()));
          }
          // 添加到桶里
          deps.add(activeEffect);
          return target[key];
        },
        set(target, key, newValue) {
          target[key] = newValue;
          // 根据 target 从桶中取得 depsMap，它是Map类型: key --> effects
          const depsMap = bucket.get(target);
          if (!depsMap) return;
          // 根据 key 取出所有副作用函数
          const effects = depsMap.get(key);
          ettects && ettects.forEach((fn) => fn());
        },
      });

// 用一个全局变量存储被注册的副作用函数
let activeEffect;
// effect函数用于注册副作用函数
function effect(fn) {
  // 将副作用函数fn 赋值给 activeEffect
  activeEffect = fn;
  // 执行副作用函数
  fn();
}

4.抽离代码：

上面的get 和 set里面的逻辑太长了，我们把它抽离到track和trigger函数中（学习官方的做法）。

      function track(target, key) {
        if (!activeEffect) {
          return ;
        }
        // 根据target从桶中取得depsMap,它也是一个Map类型: key -->effects
        let depsMap = bucket.get(target);
        // 如果depsMap不存在,那么新建一个 Map 与 target关联
        if (!depsMap) {
          bucket.set(target, (depsMap = new Map()));
        }
        // 根据key从depsMap中取得 deps(对应着:key --> effects),它是一个Set类型
        let deps = depsMap.get(key);
        // 如果 deps 不存在，同样新建一个 Set 并与 key 关