深入分析 Vue 3 源码中 `effect` 函数如何与 `track` 和 `trigger` 配合，实现精确的依赖收集和派发更新。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！今天咱们就来聊聊 Vue 3 响应式系统的核心：effect 函数，以及它和两位好基友 track 和 trigger 是如何狼狈为奸（啊不，精妙配合）实现依赖收集和派发更新的。准备好，发车了！

开胃小菜：响应式系统的概念回顾

在开始之前，咱们先简单回顾一下响应式系统是干嘛的。简单来说，它就像一个智能管家，时刻盯着你的数据，一旦数据发生变化，它就会自动通知所有关心这个数据的“住户”（也就是依赖这个数据的视图或者计算属性等等），让它们也跟着更新。

举个例子：

let price = 10;
let quantity = 2;
let total = price * quantity;

console.log(`Total: ${total}`); // 输出: Total: 20

price = 20; // 价格变了！
// 如果是响应式系统，这里 total 也会自动更新！

console.log(`Total: ${total}`); // 输出: Total: 20 (但我们希望它是 40！)

如果没有响应式系统，total 就不会自动更新，我们需要手动去修改它。这在大型应用中简直是噩梦！ Vue 的响应式系统就是来解决这个问题的，让数据变化自动驱动视图更新。

主角登场：effect 函数——响应式世界的入口

effect 函数是 Vue 3 响应式系统的核心 API 之一。它可以接收一个函数作为参数，并立即执行这个函数。更重要的是，它会跟踪这个函数执行过程中用到的所有响应式数据，并将这个函数注册为这些数据的依赖。

简单来说，effect 就是一个“记录仪”，它会记录下你在某个函数里都用了哪些响应式数据。以后这些数据一变，它就会通知你，让你重新执行这个函数。

来看看一个简单的 effect 使用例子：

import { reactive, effect } from 'vue';

const state = reactive({
  count: 0
});

effect(() => {
  console.log(`Count is: ${state.count}`); // 第一次执行，输出: Count is: 0
});

state.count++; // 触发更新，再次输出: Count is: 1

在这个例子中，effect 函数接收的函数会打印 state.count 的值。当 state.count 的值改变时，effect 会自动重新执行这个函数，从而更新控制台的输出。

幕后英雄一号：track 函数——依赖收集的侦察兵

track 函数负责收集依赖。它的作用是：当一个响应式数据被访问时，将当前正在执行的 effect 函数注册为该数据的依赖。

可以把 track 函数想象成一个侦察兵，它会记录下谁在“窥视”某个响应式数据。

track 函数的大致实现如下：

// targetMap: WeakMap，用于存储 target -> key -> dep 的映射关系
// target 是响应式对象，key 是对象的属性，dep 是 Set，存储了依赖于该属性的 effect 函数
const targetMap = new WeakMap();

let activeEffect = null; // 当前正在执行的 effect 函数

export function track(target, key) {
  if (!activeEffect) {
    return; // 如果没有正在执行的 effect，则不进行依赖收集
  }

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

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

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect); // 将当前 effect 函数添加到依赖集合中
  }
}

解释一下：

targetMap 是一个 WeakMap，用于存储 target -> key -> dep 的映射关系。 target 是响应式对象，key 是对象的属性，dep 是一个 Set，存储了所有依赖于该属性的 effect 函数。使用 WeakMap 的好处是，当 target 对象不再被使用时，可以自动从 targetMap 中移除，避免内存泄漏。
activeEffect 是一个全局变量，用于存储当前正在执行的 effect 函数。当执行 effect 函数时，会将该函数赋值给 activeEffect。这样，在 effect 函数内部访问响应式数据时，track 函数就可以获取到当前正在执行的 effect 函数。
track 函数的逻辑是：
- 首先判断 activeEffect 是否存在，如果不存在，说明当前没有正在执行的 effect 函数，则直接返回。
- 然后从 targetMap 中获取 target 对应的 depsMap，如果不存在，则创建一个新的 Map 并添加到 targetMap 中。
- 接着从 depsMap 中获取 key 对应的 dep，如果不存在，则创建一个新的 Set 并添加到 depsMap 中。
- 最后，如果 dep 中不存在 activeEffect，则将 activeEffect 添加到 dep 中。

幕后英雄二号：trigger 函数——更新通知的传令兵

trigger 函数负责触发更新。它的作用是：当一个响应式数据发生变化时，通知所有依赖于该数据的 effect 函数重新执行。

可以把 trigger 函数想象成一个传令兵，它会在响应式数据发生变化时，挨个通知那些“窥视”该数据的 effect 函数。

trigger 函数的大致实现如下：

export function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return; // 如果没有依赖，则直接返回
  }

  const dep = depsMap.get(key);
  if (!dep) {
    return; // 如果没有依赖，则直接返回
  }

  dep.forEach(effect => {
    effect(); // 依次执行依赖的 effect 函数
  });
}

解释一下：

trigger 函数首先从 targetMap 中获取 target 对应的 depsMap，如果不存在，说明该对象没有任何依赖，则直接返回。
然后从 depsMap 中获取 key 对应的 dep，如果不存在，说明该属性没有任何依赖，则直接返回。
最后，遍历 dep 中的所有 effect 函数，并依次执行它们。

三剑客合璧：effect、track 和 trigger 的完美配合

现在，我们把 effect、track 和 trigger 放在一起，看看它们是如何配合工作的。

import { reactive, effect } from 'vue';

const state = reactive({
  count: 0
});

// 1. 执行 effect 函数，并将该函数赋值给 activeEffect
effect(() => {
  // 2. 在 effect 函数内部访问 state.count，触发 get 拦截器
  console.log(`Count is: ${state.count}`);
});

// 3. 修改 state.count 的值，触发 set 拦截器
state.count++;

下面是详细的执行流程：

执行 effect 函数：
- effect 函数被执行，并将该函数赋值给全局变量 activeEffect。此时，activeEffect 指向了我们定义的那个打印 state.count 值的函数。
访问 state.count，触发 get 拦截器：
- 在 effect 函数内部，我们访问了 state.count 属性，这会触发 state 对象的 get 拦截器。
- 在 get 拦截器中，会调用 track(state, 'count') 函数，将当前的 activeEffect（也就是我们定义的那个打印 state.count 值的函数）添加到 state.count 的依赖集合中。
修改 state.count 的值，触发 set 拦截器：
- 当我们修改 state.count 的值时，会触发 state 对象的 set 拦截器。
- 在 set 拦截器中，会调用 trigger(state, 'count') 函数，通知所有依赖于 state.count 的 effect 函数重新执行。
重新执行 effect 函数：
- trigger 函数会遍历 state.count 的依赖集合，找到我们之前定义的那个打印 state.count 值的函数，并执行它。
- 这样，控制台就会输出新的 state.count 值，从而实现了响应式更新。

代码示例：一个更完整的实现 (简化版)

为了更清晰地展示 effect、track 和 trigger 的工作原理，下面提供一个更完整的 (但仍然是简化版) 的实现：

// effect.js
let activeEffect = null;

export function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次
  activeEffect = null;
}

// reactive.js
import { track, trigger } from './effect.js';

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

// track.js
const targetMap = new WeakMap();

export function track(target, key) {
  if (!activeEffect) 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 = new Set()));
  }

  dep.add(activeEffect);
}

// trigger.js
export function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (!dep) return;

  dep.forEach(effect => {
    effect();
  });
}

// main.js (使用示例)
import { reactive, effect } from './reactive.js';

const state = reactive({ count: 0 });

effect(() => {
  console.log(`Count: ${state.count}`);
});

state.count++; // 触发更新
state.count++; // 再次触发更新

这个例子将 effect、reactive、track 和 trigger 分别放在不同的文件中，更清晰地展示了它们之间的关系。

关键点总结

为了方便大家理解，我把 effect、track 和 trigger 的关键点总结成一个表格：

函数	作用	关键数据结构
`effect`	1. 接收一个函数并立即执行；2. 将该函数注册为依赖，以便在依赖的数据发生变化时重新执行。	`activeEffect`: 全局变量，指向当前正在执行的 `effect` 函数。
`track`	当响应式数据被访问时，将当前正在执行的 `effect` 函数添加到该数据的依赖集合中。	`targetMap`: `WeakMap<object, Map<string, Set<Function>>>`，存储 `target -> key -> dep` 的映射关系。 `target` 是响应式对象，`key` 是对象的属性，`dep` 是存储 `effect` 函数的 `Set`。
`trigger`	当响应式数据发生变化时，通知所有依赖于该数据的 `effect` 函数重新执行。	无

进阶思考：更复杂的场景

上面的例子只是一个非常简单的场景。在实际应用中，effect 函数可能会嵌套，或者依赖的数据可能会非常复杂。 Vue 3 的响应式系统也考虑到了这些情况，并做了相应的优化。例如：

嵌套 effect： 当 effect 函数嵌套时，activeEffect 会被压入一个栈中，以便在内层 effect 函数执行完毕后，可以恢复到外层 effect 函数。
计算属性： 计算属性本质上也是一个 effect 函数，它会缓存计算结果，并在依赖的数据发生变化时才重新计算。
Scheduler (调度器): Vue 3 引入了 scheduler，允许开发者控制 effect 的执行时机，例如可以合并多次更新，减少不必要的渲染。

总结

Vue 3 的响应式系统是一个非常精巧的设计。 effect、track 和 trigger 这三个函数相互配合，实现了精确的依赖收集和派发更新。理解了这三个函数的工作原理，就能更好地理解 Vue 3 的响应式系统，也能更好地使用 Vue 3 进行开发。

希望今天的讲座对大家有所帮助！散会！

发表回复 取消回复

发表回复取消回复