剖析 Vue 3 源码中 `effect` 函数 (即响应式副作用函数) 的核心作用，以及它是如何与 `track` 和 `trigger` 配合工作的。

咳咳，各位观众老爷，晚上好！今天咱们来聊聊 Vue 3 响应式系统的核心——effect 函数，以及它的小伙伴 track 和 trigger。这三个家伙凑在一起，就像一个精密的齿轮组，驱动着 Vue 3 响应式系统的运转。准备好了吗？Let’s dive in!

一、effect 函数：副作用的守门人

首先，我们得搞清楚什么是“副作用”。在编程世界里，副作用指的是函数除了返回值之外，还对外部环境产生了影响。比如，修改了全局变量，更新了 DOM，发起了网络请求等等。

在 Vue 3 的响应式系统中，effect 函数就是用来包裹这些副作用的。它的主要作用是：

收集依赖： 当 effect 函数执行的时候，如果它访问了响应式数据，那么 effect 函数就会被“登记”到这个响应式数据的依赖列表中。也就是告诉这个响应式数据：“嘿，哥们，我需要你，你变了记得通知我一声！”
执行副作用： effect 函数会执行你传入的回调函数，这个回调函数里通常包含着需要响应式数据驱动的副作用代码。
响应式更新： 当响应式数据发生变化时，它会通知所有依赖于它的 effect 函数，然后这些 effect 函数就会重新执行，从而更新副作用。

简单来说，effect 函数就像一个观察者，默默地观察着响应式数据的变化，一旦发现变化，就立即执行相应的副作用。

让我们来看一个简单的例子：

import { reactive, effect } from 'vue';

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

effect(() => {
  console.log(`Count is: ${state.count}`); // 副作用：打印 count 的值
  document.getElementById('app').textContent = `Count: ${state.count}`; // 副作用：更新 DOM
});

state.count++; // 触发响应式更新

在这个例子中，effect 函数包裹了一个回调函数，这个回调函数会打印 state.count 的值，并且更新 DOM。当 state.count 的值发生变化时，effect 函数就会重新执行，从而更新控制台输出和 DOM。

二、track 函数：依赖收集的幕后英雄

track 函数是依赖收集的核心。它的作用是：

判断是否需要收集依赖： 首先，它会检查当前是否有正在执行的 effect 函数。如果没有，说明当前不是在响应式上下文中，不需要收集依赖。
建立依赖关系： 如果有正在执行的 effect 函数，那么 track 函数会将这个 effect 函数添加到响应式数据的依赖列表中。也就是建立响应式数据和 effect 函数之间的联系。

简单来说，track 函数就像一个登记员，负责将 effect 函数登记到响应式数据的“户口本”上。

让我们来看一个简化的 track 函数的实现：

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

function track(target, key) {
  if (!activeEffect) return; // 没有正在执行的 effect 函数，直接返回

  let depsMap = targetMap.get(target); // 获取 target 对应的 depsMap
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let dep = depsMap.get(key); // 获取 key 对应的 dep
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect); // 将 activeEffect 添加到 dep 中
  }
}

// 全局的依赖收集器
const targetMap = new WeakMap();

function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn;
    fn(); // 执行副作用函数，触发 getter，进而触发 track
    activeEffect = null; // 执行完毕，重置 activeEffect
  };

  effectFn(); // 立即执行一次
}

在这个例子中：

activeEffect 变量用来保存当前正在执行的 effect 函数。
targetMap 是一个全局的 WeakMap，用来存储所有响应式数据的依赖关系。 targetMap 的 key 是响应式对象，value 是一个 depsMap，depsMap 的 key 是响应式对象的属性，value 是一个 dep，dep 是一个 Set，存储了所有依赖于该属性的 effect 函数。
track 函数接收两个参数：target (响应式对象) 和 key (响应式属性)。它会从 targetMap 中获取 target 对应的 depsMap，然后从 depsMap 中获取 key 对应的 dep。如果 dep 不存在，就创建一个新的 dep。最后，将当前的 activeEffect 添加到 dep 中。
effect 函数将传入的副作用函数包装成 effectFn 并立即执行，在执行 effectFn 之前，将 activeEffect 设置为 effectFn，执行完毕后，重置 activeEffect 为 null。

三、trigger 函数：响应式更新的指挥官

trigger 函数是响应式更新的触发器。它的作用是：

查找依赖： 根据响应式对象和属性，从 targetMap 中找到所有依赖于该属性的 effect 函数。
执行依赖： 遍历所有找到的 effect 函数，依次执行它们。

简单来说，trigger 函数就像一个广播员，负责通知所有依赖于某个响应式数据的 effect 函数：“注意啦！注意啦！你依赖的数据发生变化啦，赶紧更新吧！”

让我们来看一个简化的 trigger 函数的实现：

function trigger(target, key) {
  const depsMap = targetMap.get(target); // 获取 target 对应的 depsMap
  if (!depsMap) return; // 没有依赖，直接返回

  const dep = depsMap.get(key); // 获取 key 对应的 dep
  if (!dep) return; // 没有依赖，直接返回

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

在这个例子中：

trigger 函数接收两个参数：target (响应式对象) 和 key (响应式属性)。它会从 targetMap 中获取 target 对应的 depsMap，然后从 depsMap 中获取 key 对应的 dep。如果 dep 不存在，说明没有 effect 函数依赖于该属性，直接返回。否则，遍历 dep 中的所有 effect 函数，依次执行它们。

四、effect、track 和 trigger 的协同工作

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

初始化： 当创建一个响应式对象时，Vue 3 会使用 reactive 函数将其包装成一个 Proxy 对象。
依赖收集： 当 effect 函数执行时，如果它访问了响应式对象的属性，就会触发 Proxy 对象的 get 拦截器。在 get 拦截器中，会调用 track 函数，将当前的 effect 函数添加到该属性的依赖列表中。
响应式更新： 当响应式对象的属性发生变化时，会触发 Proxy 对象的 set 拦截器。在 set 拦截器中，会调用 trigger 函数，找到所有依赖于该属性的 effect 函数，并依次执行它们。

用一个表格来总结它们的关系：

函数	作用	触发时机
`effect`	包裹副作用，收集依赖，响应式更新。当依赖的响应式数据发生变化时，重新执行副作用函数。	首次执行，以及依赖的响应式数据发生变化时。
`track`	依赖收集。将当前的 `effect` 函数添加到响应式数据的依赖列表中。	当 `effect` 函数执行时，访问了响应式数据的属性时，触发 Proxy 对象的 `get` 拦截器，在 `get` 拦截器中调用 `track` 函数。
`trigger`	响应式更新。找到所有依赖于某个响应式数据的 `effect` 函数，并依次执行它们。	当响应式数据的属性发生变化时，触发 Proxy 对象的 `set` 拦截器，在 `set` 拦截器中调用 `trigger` 函数。

让我们用一个完整的例子来演示这个过程：

import { reactive, effect } from 'vue';

// 简化的 reactive 函数
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });
}

const state = reactive({
  name: 'Vue',
  age: 3
});

effect(() => {
  console.log(`Name: ${state.name}, Age: ${state.age}`);
  document.getElementById('app').textContent = `Name: ${state.name}, Age: ${state.age}`;
});

state.age++; // 触发响应式更新

在这个例子中：

我们创建了一个响应式对象 state。
我们使用 effect 函数包裹了一个回调函数，这个回调函数会打印 state.name 和 state.age 的值，并且更新 DOM。
当 state.age 的值发生变化时，会触发 Proxy 对象的 set 拦截器，在 set 拦截器中会调用 trigger 函数。
trigger 函数会找到所有依赖于 state.age 的 effect 函数，并执行它们。
effect 函数重新执行，从而更新控制台输出和 DOM。

五、高级用法和注意事项

effect 的选项： effect 函数可以接收一个可选的选项对象，用来配置它的行为。比如，可以设置 lazy 选项为 true，让 effect 函数在创建时不要立即执行，而是等到依赖数据发生变化时再执行。还可以设置 scheduler 选项，自定义 effect 函数的执行时机。
避免无限循环： 在使用 effect 函数时，要特别注意避免无限循环。比如，如果在 effect 函数中修改了依赖的响应式数据，那么可能会导致 effect 函数不断地重新执行，从而造成无限循环。
stop 函数： 可以使用 stop 函数停止一个 effect 函数的执行。停止后，该 effect 函数将不再响应依赖数据的变化。
计算属性 (Computed) 和侦听器 (Watch)： Vue 3 的计算属性和侦听器都是基于 effect 函数实现的。它们是对 effect 函数的更高层次的封装，提供了更方便的 API。

六、总结

effect、track 和 trigger 是 Vue 3 响应式系统的基石。它们之间的协同工作，实现了响应式数据的自动更新，极大地简化了 Vue 应用的开发。

理解了这三个函数的工作原理，你就能更好地理解 Vue 3 的响应式系统，从而写出更高效、更健壮的 Vue 应用。

好了，今天的讲座就到这里。希望大家有所收获！如果有什么问题，欢迎随时提问。谢谢大家！

发表回复 取消回复

发表回复取消回复