Vue 3源码深度解析之：`effect`函数：如何追踪依赖并调度更新。

嘿，大家好！今天咱们来聊聊 Vue 3 响应式系统的核心之一：effect 函数。这玩意儿，说白了，就是 Vue 帮你追踪数据变化，然后自动更新视图的秘密武器。准备好了吗？咱们开讲！

开场白：响应式，不只是“自动”

你肯定用过 Vue，知道数据一变，页面就跟着变。这感觉就像变魔术一样，对吧？但魔术背后是有秘密的，而 effect 就是揭开这个秘密的关键。

我们先来回顾一下 Vue 3 的响应式系统大概长什么样：

1. reactive: 让你的普通 JavaScript 对象变成响应式对象。
2. effect: 创建一个副作用函数，当依赖的数据发生变化时，这个函数会自动执行。
3. ref: 创建一个响应式的变量，可以持有任何类型的值。
4. computed: 创建一个计算属性，它的值会根据依赖的数据自动更新。

而 effect，就像一个辛勤的侦探，默默地监视着那些被 reactive 或者 ref 包装过的数据。一旦数据有风吹草动，它就会立刻通知相关的函数去更新。

第一幕：effect 的基本用法

先来个最简单的例子，让你对 effect 有个直观的认识：

import { reactive, effect } from 'vue';

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

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

state.count++; // 触发 effect，控制台输出 "Count is: 1"

这段代码做了什么？

1. 我们用 reactive 创建了一个响应式对象 state，里面有个 count 属性。
2. 我们用 effect 包裹了一个函数。这个函数会读取 state.count 的值。
3. 当我们修改 state.count 的时候，effect 包裹的函数就会自动执行，打印出新的 count 值。

简单来说，effect 就像一个观察者，它观察着 state.count 的变化。一旦 state.count 发生变化，它就会自动执行我们定义的那个函数。

第二幕：effect 内部的秘密——依赖追踪

effect 为什么能知道 state.count 变了呢？这就涉及到依赖追踪了。

简单来说，依赖追踪就是 effect 在执行的时候，会记录下它读取了哪些响应式数据。这些数据就成了 effect 的依赖。当这些依赖发生变化时，effect 就会被重新执行。

我们来模拟一下这个过程（简化版）：

// 简化版的 reactive
function reactive(obj) {
  const observed = new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 追踪依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发更新
      return result;
    }
  });
  return observed;
}

// 简化版的 effect
let activeEffect = null; // 当前激活的 effect

function effect(fn) {
  activeEffect = fn; // 设置当前激活的 effect
  fn(); // 立即执行一次，触发依赖收集
  activeEffect = null; // 清空当前激活的 effect
}

// 依赖收集
const targetMap = new WeakMap(); // target -> key -> set(effect)

function track(target, key) {
  if (!activeEffect) return; // 没有 effect 就不用追踪

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

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

  deps.add(activeEffect); // 将当前 effect 添加到依赖集合中
}

// 触发更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return; // 没有依赖就不用触发

  const deps = depsMap.get(key);
  if (!deps) return; // 没有依赖就不用触发

  deps.forEach(effect => effect()); // 依次执行依赖的 effect
}

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

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

state.count++; // 触发 effect，控制台输出 "Count is: 1"

这个例子虽然简化了很多，但是它展示了依赖追踪的核心思想：

1. reactive 的 get 拦截器: 当我们读取 state.count 的时候，get 拦截器会调用 track 函数。
2. track 函数: track 函数会把当前的 effect 函数（也就是 activeEffect）添加到 state.count 的依赖集合中。
3. reactive 的 set 拦截器: 当我们修改 state.count 的时候，set 拦截器会调用 trigger 函数。
4. trigger 函数: trigger 函数会找到 state.count 的依赖集合，然后依次执行集合中的 effect 函数。

用一张表来总结一下：

步骤	发生的操作	涉及的函数	作用
初始化	创建响应式对象 state	reactive	将普通对象转换为响应式对象，添加 get 和 set 拦截器。
初始化	创建副作用函数 effect	effect	立即执行一次传入的函数，触发依赖收集，并将当前激活的 effect 函数设置为传入的函数。
读取数据	读取 state.count	reactive 的 get	get 拦截器调用 track 函数，将当前激活的 effect 函数添加到 state.count 的依赖集合中。
修改数据	修改 state.count	reactive 的 set	set 拦截器调用 trigger 函数，找到 state.count 的依赖集合，然后依次执行集合中的 effect 函数。
执行副作用	执行 effect 函数	effect	打印 Count is: ${state.count}。

第三幕：effect 的高级用法——调度器（Scheduler）

在实际应用中，我们可能不希望每次数据变化都立即执行 effect。比如，我们可能希望把多次数据变化合并成一次更新，或者在特定的时机才执行 effect。这时候，就需要用到 effect 的调度器了。

Vue 3 的 effect 函数允许我们传入一个 options 对象，其中可以包含一个 scheduler 属性。scheduler 是一个函数，它会在依赖发生变化时被调用，但是它不会立即执行 effect，而是把 effect 的执行交给调度器来控制。

import { reactive, effect } from 'vue';

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

effect(() => {
  console.log(`Count is: ${state.count}`);
}, {
  scheduler: (effectFn) => {
    setTimeout(() => {
      effectFn(); // 在下一个 tick 执行 effect
    }, 0);
  }
});

state.count++; // 触发 effect，但不会立即执行
state.count++; // 触发 effect，但不会立即执行
// 在下一个 tick，控制台输出 "Count is: 2"

在这个例子中，我们定义了一个 scheduler 函数，它会在 effect 的依赖发生变化时被调用。但是，scheduler 函数并没有立即执行 effect，而是使用 setTimeout 把 effect 的执行推迟到了下一个 tick。

这样做的好处是，我们可以把多次数据变化合并成一次更新。在上面的例子中，我们连续修改了两次 state.count，但是 effect 函数只执行了一次，打印出了最终的 count 值。

第四幕：effect 的更多选项

effect 函数除了 scheduler 选项之外，还有其他的选项：

• lazy: 如果设置为 true，则 effect 函数不会立即执行，而是等到第一次访问其结果时才执行。
• computed: 实际上就是基于 effect 实现的，它会缓存计算结果，只有当依赖发生变化时才会重新计算。
• onTrack: 在依赖被追踪时调用。
• onTrigger: 在依赖触发更新时调用。
• stop: 用于手动停止 effect 的执行。

这些选项可以让我们更灵活地控制 effect 的行为。

第五幕：effect 的应用场景

effect 函数是 Vue 3 响应式系统的核心，它被广泛应用于 Vue 的各个模块中。

• computed: computed 实际上就是基于 effect 实现的。computed 会创建一个 effect 函数，这个 effect 函数会计算 computed 的值，并且会追踪 computed 的依赖。当 computed 的依赖发生变化时，effect 函数会被重新执行，computed 的值也会被重新计算。
• watch: watch 也可以基于 effect 实现。watch 会创建一个 effect 函数，这个 effect 函数会监听指定的数据变化，并且会在数据变化时执行回调函数。
• 组件更新: Vue 组件的更新也是基于 effect 实现的。当组件的数据发生变化时，Vue 会创建一个 effect 函数来更新组件的视图。

实战演练：用 effect 实现一个简单的 watch

为了更好地理解 effect，我们来用 effect 实现一个简单的 watch 函数：

import { reactive, effect } from 'vue';

function watch(source, cb) {
  effect(() => {
    const value = typeof source === 'function' ? source() : source;
    cb(value);
  }, {
    scheduler: () => {
      // 每次依赖更新都会调用scheduler，但是我们只希望在依赖真正改变时才执行回调
      // 这里可以添加比较逻辑，判断 value 是否发生了变化
      const newValue = typeof source === 'function' ? source() : source;
      cb(newValue);
    },
    lazy: true // 首次不执行
  });
}

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

watch(() => state.count, (value) => {
  console.log(`Count changed to: ${value}`);
});

state.count++; // 控制台输出 "Count changed to: 1"
state.count++; // 控制台输出 "Count changed to: 2"

这个 watch 函数接收两个参数：

• source: 要监听的数据源，可以是一个函数或者一个响应式对象。
• cb: 回调函数，当数据源发生变化时会被调用。

watch 函数内部使用 effect 创建一个副作用函数。这个副作用函数会读取数据源的值，并且会在数据源发生变化时执行回调函数。

总结：effect 的力量

effect 函数是 Vue 3 响应式系统的核心，它实现了依赖追踪和自动更新。通过 effect 函数，我们可以轻松地监听数据的变化，并且在数据变化时执行相应的操作。

掌握 effect 函数，你就掌握了 Vue 3 响应式系统的精髓。希望今天的讲解对你有所帮助！ 记住，响应式系统并非魔法，而是精巧的代码设计和巧妙的依赖管理。下次当你看到页面自动更新时，不妨想想 effect 正在背后默默地工作。

好了，今天的讲座就到这里。感谢大家的收听，下次再见！