Vue3.0响应式模块源码分析：effect 篇

1. createReactiveEffect：创建侦听函数

createReactiveEffect 函数是 effect 模块的核心之一，它负责创建侦听函数。侦听函数是一种特殊的函数，当其依赖的响应式数据发生变化时，它就会被触发并执行。

createReactiveEffect 函数接收两个参数：

• callback： 侦听函数本身。它是一个普通的函数，但它必须遵循一定的规则。
• options： 一些可选选项，用于配置侦听函数的行为。

export function createReactiveEffect(callback, options) {
  const effect = new ReactiveEffect(callback, options);
  effect.run(); // 立即执行侦听函数
  return effect;
}

createReactiveEffect 函数首先创建一个 ReactiveEffect 实例，然后调用其 run 方法立即执行侦听函数。ReactiveEffect 实例是一个包含了侦听函数、依赖关系和一些其他信息的类。

2. track：收集侦听函数

track 函数是 effect 模块的另一个核心部分，它负责收集侦听函数的依赖关系。依赖关系是指侦听函数所依赖的响应式数据。当这些数据发生变化时，侦听函数就会被触发执行。

track 函数接收两个参数：

• target： 发生变化的响应式数据的对象。
• key： 发生变化的响应式数据的属性名。

export function track(target, key) {
  let effect = activeEffect;
  if (effect) {
    let dep = getDep(target, key);
    trackEffects(dep, effect);
  }
}

track 函数首先获取当前激活的侦听函数，然后获取发生变化的响应式数据的依赖关系集合。接下来，它将侦听函数添加到依赖关系集合中，以便当数据发生变化时，侦听函数可以被触发执行。

3. trigger：触发侦听函数执行依赖更新

trigger 函数是 effect 模块的第三个核心部分，它负责触发侦听函数执行依赖更新。当响应式数据发生变化时，trigger 函数会被调用。

trigger 函数接收两个参数：

• target： 发生变化的响应式数据的对象。
• key： 发生变化的响应式数据的属性名。

export function trigger(target, key, value, oldValue) {
  let dep = getDep(target, key);
  triggerEffects(dep);
}

trigger 函数首先获取发生变化的响应式数据的依赖关系集合，然后触发依赖关系集合中的所有侦听函数。侦听函数被触发后，它们会执行自己的逻辑，通常是更新视图。

总结

在本文中，我们详细分析了 Vue3 的响应式系统，重点关注 effect 模块的实现。我们学习了 createReactiveEffect 如何创建侦听函数、track 如何收集侦听函数（依赖收集）以及 trigger 如何触发侦听函数执行依赖更新。这三部分是该模块的核心内容，对于理解 Vue3 的响应式系统至关重要。