深入 Vue3 源码，学习响应式原理

Vue2 响应式原理

学过 Vue2 的话应该知道响应式原理是由 Object.defineProperty 对数据进行劫持，再加上订阅发布，实现数据的响应的。

Object.defineProperty 存在以下几个方面的缺点。

1. 初始化的时候需要遍历对象的所有属性进行劫持，如果对象存在嵌套还需要进行递归。导致初始化的时候需要消耗一些资源用于递归遍历。

2. 从上面可以推导出 Vue2 对于新增、删减对象属性是无法进行劫持，需要通过 Vue.set、Vue.delete 进行操作。

3. 每个调用者会生成一个 Watcher，造成内存占用。

4. 无法劫持 Set、Map 对象。

Vue3 响应式原理

针对以上问题，Vue3 改用了 ES6 原生的 Proxy 对数据进行代理。

Proxy 基本用法如下：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      console.log("get: ", key);
      // return Reflect.get(target, key);
      return target[key];
    },

    set(target, key, value) {
      console.log("set: ", key, " = ", value);
      // Reflect.set(target, key, value);
      target[key] = value;
      return value;
    },
  });
};

var a = reactive({ count: 1 });
console.log(a.count);

a.count = 2;
console.log(a.count);

// log 输出
// get:  count
// 1
// set:  count  =  2
// get:  count
// 2

如此便可检测到数据的变化。接下来只需在 get 进行收集依赖，set 通知依赖更新。

接下来还需借助 effect、track 和 trigger 方法。

effect 函数传入一个回调函数，回调函数会立即执行，并自动与响应式数据建立依赖关系。

track 在 proxy get 中执行，建立依赖关系。

trigger 响应式数据发生变化时，根据依赖关系找到对应函数进行执行。

代码实现如下：

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      console.log("[proxy get] ", key);
      track(target, key);
      // return Reflect.get(target, key);
      return target[key];
    },

    set(target, key, value) {
      console.log("[proxy set]  ", key, " = ", value);
      // Reflect.set(target, key, value);
      target[key] = value;
      trigger(target, key);
      return value;
    },
  });
};

// 用于存放 effect 传入的 fn，便于 track 时找到对应 fn
const effectStack = [];

// 用于保存 响应式对象 和 fn 的关系
// {
//   target: {
//     key: [fn, fn];
//   }
// }
const targetMap = {};

const track = (target, key) => {
  let depsMap = targetMap[target];
  if (!depsMap) {
    targetMap[target] = depsMap = {};
  }
  let dep = depsMap[key];
  if (!dep) {
    depsMap[key] = dep = [];
  }

  // 建立依赖关系
  const activeEffect = effectStack[effectStack.length - 1];
  dep.push(activeEffect);
};

const trigger = (target, key) => {
  const depsMap = targetMap[target];
  if (!depsMap) return;
  const deps = depsMap[key];
  // 根据依赖关系，找出 fn 并重新执行
  deps.map(fn => {
    fn();
  });
};

const effect = (fn) => {
  try {
    effectStack.push(fn);
    fn();
  } catch (error) {
    effectStack.pop(fn);
  }
};

var a = reactive({ count: 1 });

effect(() => {
  console.log("[effect] ", a.count);
});

a.count = 2;

// log 输出
// [proxy get]  count
// [effect]  1
// [proxy set]   count  =  2
// [proxy get]  count
// [effect]  2

以上代码并不是 Vue3 的源码，而是 Vue3 响应式的原理，相比起 Vue2 要更加简单。

执行顺序为

1. 调用 reactive 代理响应式对象；
2. 调用 effect ，会将 fn 保存至 effectStack，在执行 fn 时会触发 Proxy 的 get；
3. 从 Proxy 的 get 触发 track，将数据与 fn 建立关系；
4. 修改响应式数据，触发 Proxy 的 set；
5. 从 Proxy 的 set 触发 trigger，从而找出对应的 fn 并执行。

弄清楚原理再去看源码会简单很多，下面我们一起去看下源码。

Vue3 响应式源码

Vue3 的响应式是一个独立的模块，不依赖框架，甚至可以在 React、Angular 中使用。

reactive 函数位于 packages/reactivity/src/reactive.ts

// packages/reactivity/src/reactive.ts
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler,
  proxyMap: WeakMap
) {
    // ...
  const proxy = new Proxy(
    target,
    // 对 Set、Map 的集合使用 collectionHandlers（mutableCollectionHandlers）
    // 普通对象使用 baseHandlers（mutableHandlers）
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  // ...
  return proxy
}

接下来看下 mutableHandlers

// packages/reactivity/src/baseHandlers.ts
export const mutableHandlers: ProxyHandler