剖析 Vue 3 源码中 `ReactiveEffect` 类如何利用 `WeakMap` 和 `Set` 数据结构高效地管理依赖关系图，解释 `targetMap` 和 `dep` 的具体数据结构。

各位观众老爷，晚上好！今天咱们来聊聊 Vue 3 响应式系统的核心之一：ReactiveEffect 类。这玩意儿听起来玄乎，但其实就是个“依赖追踪器”，负责帮你搞清楚哪个数据变了，哪些地方需要跟着更新。它背后的功臣就是 WeakMap 和 Set 这两个数据结构。

开场白：响应式系统的核心挑战

在 Vue 3 中，响应式系统要解决一个核心问题：当数据发生变化时，如何高效地找到所有依赖于这个数据的“副作用”（Effect）。所谓副作用，就是因为数据变化而需要执行的函数，比如更新 DOM、执行计算属性等等。

如果每次数据变化都遍历所有可能的副作用，那性能肯定爆炸。所以，我们需要一种机制，能够快速地找到真正需要更新的副作用。

这就是 ReactiveEffect 和它的小伙伴们（WeakMap 和 Set）要解决的问题。

ReactiveEffect 类：副作用的载体

首先，咱们来看看 ReactiveEffect 类的基本结构（简化版）：

class ReactiveEffect<T = any> {
  active = true; // 标记 effect 是否激活
  deps: Dep[] = []; // 存储 effect 依赖的所有 Dep 实例
  constructor(
    public fn: () => T, // effect 要执行的函数
    public scheduler: EffectScheduler | null = null // 可选的调度器
  ) {
    recordEffectScope(this); // 记录 effect 的作用域
  }

  run() {
    if (!this.active) {
      return this.fn();
    }

    try {
      activeEffect = this; // 设置当前激活的 effect 为 this
      return this.fn(); // 执行 effect 函数
    } finally {
      activeEffect = undefined; // 清空当前激活的 effect
    }
  }

  stop() {
    if (this.active) {
      cleanupEffect(this); // 清理 effect 相关的依赖
      this.active = false;
    }
  }
}

type Dep = Set<ReactiveEffect>; // Dep 就是一个 ReactiveEffect 的集合
type EffectScheduler = (...args: any[]) => any;

let activeEffect: ReactiveEffect | undefined;

简单解释一下：

fn: 这是 ReactiveEffect 要执行的核心函数，通常会读取一些响应式数据。
scheduler: 一个可选的调度器，用于控制 effect 何时以及如何执行。
active: 一个标志位，表示 effect 是否处于激活状态。如果 active 为 false，则不会执行 effect。
deps: 一个数组，存储了当前 effect 依赖的所有 Dep 实例。每个 Dep 实例代表一个响应式属性的依赖集合。
run(): 执行 effect 函数。在执行之前，会将当前的 activeEffect 设置为 this，这样在 fn 函数内部读取响应式数据时，就可以追踪到当前的 effect。
stop(): 停止 effect 的执行，并清理所有相关的依赖。

targetMap：依赖关系的大管家

targetMap 是一个 WeakMap，它的作用是存储所有响应式对象和它们对应的依赖关系。

// targetMap: WeakMap<object, KeyToDepMap>
// KeyToDepMap: Map<any, Dep>
const targetMap = new WeakMap<object, KeyToDepMap>();

Key: targetMap 的 key 是一个响应式对象（reactive object）。
Value: targetMap 的 value 是一个 KeyToDepMap，它是一个 Map。

KeyToDepMap 进一步存储了响应式对象中每个属性的依赖关系。

// KeyToDepMap: Map<any, Dep>
type KeyToDepMap = Map<any, Dep>;

Key: KeyToDepMap 的 key 是一个响应式对象的属性名（property key）。
Value: KeyToDepMap 的 value 是一个 Dep，它是一个 Set，存储了所有依赖于这个属性的 ReactiveEffect 实例。

Dep：副作用的集合

Dep 就是一个 Set，它存储了所有依赖于某个特定响应式属性的 ReactiveEffect 实例。

type Dep = Set<ReactiveEffect>;

为什么要用 Set 呢？因为 Set 可以自动去重，避免同一个 ReactiveEffect 被多次添加到依赖列表中。

依赖追踪：track() 函数

当我们在 ReactiveEffect 的 fn 函数中读取响应式数据时，track() 函数会被调用，用于追踪依赖关系。

export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!isTracking()) {
    return;
  }

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = createDep()));
  }

  trackEffects(dep);
}

export function isTracking() {
  return activeEffect !== undefined;
}

export function createDep(effects?: ReactiveEffect[]): Dep {
  const dep = new Set<ReactiveEffect>(effects);
  return dep;
}

export function trackEffects(dep: Dep) {
  if (activeEffect) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

简单解释一下：

isTracking(): 首先检查当前是否有激活的 ReactiveEffect 实例。如果没有，说明当前不是在 effect 函数中读取响应式数据，不需要进行依赖追踪。
targetMap.get(target): 尝试从 targetMap 中获取 target 对应的 depsMap。
depsMap.get(key): 尝试从 depsMap 中获取 key 对应的 dep。
createDep(): 如果 dep 不存在，则创建一个新的 Dep 实例。
trackEffects(dep): 将当前的 activeEffect 添加到 dep 中，并将 dep 添加到 activeEffect.deps 中。

触发更新：trigger() 函数

当响应式数据发生变化时，trigger() 函数会被调用，用于触发所有依赖于这个数据的 ReactiveEffect 实例的执行。

export function trigger(target: object, type: TriggerOpTypes, key: unknown, newValue?: any, oldValue?: any) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  let deps: (Dep | undefined)[] = [];
  if (key !== void 0) {
    deps.push(depsMap.get(key));
  }
  // ... 省略一些代码

  const effects: ReactiveEffect[] = [];
  for (const dep of deps) {
    if (dep) {
      effects.push(...dep);
    }
  }
  triggerEffects(createDep(effects));
}

export function triggerEffects(dep: Dep) {
  for (const effect of dep) {
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect.run();
    }
  }
}

简单解释一下：

targetMap.get(target): 从 targetMap 中获取 target 对应的 depsMap。
depsMap.get(key): 从 depsMap 中获取 key 对应的 dep。
triggerEffects(createDep(effects)): 遍历 dep 中的所有 ReactiveEffect 实例，并执行它们。如果 effect 有 scheduler，则调用 scheduler，否则调用 effect.run()。

数据结构总结

为了更清晰地理解 targetMap、KeyToDepMap 和 Dep 的关系，我们用一个表格来总结一下：

数据结构	类型	Key	Value	作用
`targetMap`	`WeakMap`	响应式对象（reactive object）	`KeyToDepMap`	存储所有响应式对象和它们对应的依赖关系。
`KeyToDepMap`	`Map`	响应式对象的属性名（property key）	`Dep`	存储响应式对象中每个属性的依赖关系。
`Dep`	`Set`	无	`ReactiveEffect` 实例	存储所有依赖于某个特定响应式属性的 `ReactiveEffect` 实例。

为什么使用 WeakMap 和 Set？

WeakMap: WeakMap 的 key 是弱引用，这意味着当响应式对象不再被其他地方引用时，WeakMap 中对应的键值对会被自动垃圾回收，避免内存泄漏。
Set: Set 可以自动去重，避免同一个 ReactiveEffect 被多次添加到依赖列表中，提高性能。

一个完整的例子

为了更好地理解整个流程，我们来看一个完整的例子：

import { reactive, effect, track, trigger } from './reactivity'; // 假设这些函数已经定义

const data = reactive({
  count: 0,
  message: 'Hello',
});

effect(() => {
  console.log('count:', data.count);
});

effect(() => {
  console.log('message:', data.message);
});

data.count++;
data.message = 'World';

在这个例子中，我们创建了一个响应式对象 data，它有两个属性：count 和 message。然后，我们创建了两个 effect 函数，分别依赖于 data.count 和 data.message。

当 data.count 和 data.message 发生变化时，对应的 effect 函数会被重新执行。

流程分析

创建响应式对象 data: reactive() 函数会将 data 对象转换为响应式对象，并创建对应的 Proxy 实例。
创建 effect 函数: effect() 函数会创建一个 ReactiveEffect 实例，并将 fn 函数作为参数传递给它。
执行 effect 函数: ReactiveEffect 实例的 run() 方法会被调用，执行 fn 函数。
追踪依赖关系: 在 fn 函数中读取 data.count 和 data.message 时，track() 函数会被调用，将当前的 ReactiveEffect 实例添加到对应的 Dep 实例中。
触发更新: 当 data.count 和 data.message 发生变化时，trigger() 函数会被调用，触发所有依赖于这些属性的 ReactiveEffect 实例的执行。

代码示例（简化的 reactivity.ts）

为了让大家更好地理解代码，这里提供一个简化的 reactivity.ts 实现：

export function reactive(target: object) {
  return new Proxy(target, {
    get(target: any, key: string, receiver: any) {
      const res = Reflect.get(target, key, receiver);
      track(target, "get", key);
      return res;
    },
    set(target: any, key: string, value: any, receiver: any) {
      const oldValue = target[key];
      const res = Reflect.set(target, key, value, receiver);
      if (value !== oldValue) {
        trigger(target, "set", key, value, oldValue);
      }
      return res;
    },
  });
}

export function effect(fn: Function) {
  const _effect = new ReactiveEffect(fn);
  _effect.run();
}

export function track(target: object, type: TrackOpTypes, key: unknown) {
  if (!isTracking()) {
    return;
  }

  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }

  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = createDep()));
  }

  trackEffects(dep);
}

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key: unknown,
  newValue?: any,
  oldValue?: any
) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }

  let deps: (Dep | undefined)[] = [];
  if (key !== void 0) {
    deps.push(depsMap.get(key));
  }

  const effects: ReactiveEffect[] = [];
  for (const dep of deps) {
    if (dep) {
      effects.push(...dep);
    }
  }
  triggerEffects(createDep(effects));
}

export let activeEffect: ReactiveEffect | undefined;

export function isTracking() {
  return activeEffect !== undefined;
}

export function trackEffects(dep: Dep) {
  if (activeEffect) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

export function triggerEffects(dep: Dep) {
  for (const effect of dep) {
    effect.run();
  }
}

export const targetMap = new WeakMap<object, KeyToDepMap>();
type KeyToDepMap = Map<any, Dep>;
type Dep = Set<ReactiveEffect>;

export const createDep = (effects?: ReactiveEffect[]): Dep => {
  const dep = new Set<ReactiveEffect>(effects);
  return dep;
};

export type TrackOpTypes = "get";
export type TriggerOpTypes = "set";

class ReactiveEffect<T = any> {
  active = true; // 标记 effect 是否激活
  deps: Dep[] = []; // 存储 effect 依赖的所有 Dep 实例
  constructor(
    public fn: () => T, // effect 要执行的函数
    public scheduler: EffectScheduler | null = null // 可选的调度器
  ) {
    recordEffectScope(this); // 记录 effect 的作用域
  }

  run() {
    if (!this.active) {
      return this.fn();
    }

    try {
      activeEffect = this; // 设置当前激活的 effect 为 this
      return this.fn(); // 执行 effect 函数
    } finally {
      activeEffect = undefined; // 清空当前激活的 effect
    }
  }

  stop() {
    if (this.active) {
      cleanupEffect(this); // 清理 effect 相关的依赖
      this.active = false;
    }
  }
}

type EffectScheduler = (...args: any[]) => any;

function recordEffectScope(effect: ReactiveEffect) {
  // TODO: Implement Effect Scope
}

function cleanupEffect(effect: ReactiveEffect) {
  // TODO: Implement cleanup
}

总结

ReactiveEffect 类利用 WeakMap 和 Set 数据结构，构建了一个高效的依赖关系图，实现了细粒度的响应式更新。 targetMap 存储了所有响应式对象和它们的依赖关系，Dep 存储了所有依赖于某个特定响应式属性的 ReactiveEffect 实例。

这种设计使得 Vue 3 的响应式系统能够在数据发生变化时，快速地找到所有需要更新的副作用，从而提高了性能。

好了，今天的讲座就到这里。希望大家能够对 Vue 3 的响应式系统有更深入的了解。感谢各位的观看！咱们下期再见！

发表回复 取消回复

发表回复取消回复