探讨 Vue 3 源码中 `watchEffect` 如何在内部通过 `effect` 函数实现依赖收集和自动停止，无需指定依赖源。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，晚上好！欢迎来到“Vue 3 源码探秘”系列讲座。今天我们要聊的是 watchEffect 这个神奇的 API，看看它如何在内部悄悄地通过 effect 函数实现依赖收集和自动停止，而且还不用你显式地告诉它依赖是谁！这听起来是不是有点像魔术？别急，咱们一层层揭开它的神秘面纱。

开场白：watchEffect 是个啥？

在 Vue 的响应式世界里，我们经常需要监听一些数据的变化，然后执行一些副作用。 watch API 可以让你精确地指定要监听的数据源，但有时候，你可能只想简单地执行一些副作用，而且副作用里用到了哪些响应式数据，你也不想手动一个个列出来。这时候，watchEffect 就派上用场了。

简单来说，watchEffect 会立即执行一次你提供的回调函数，并在执行过程中自动追踪所有被访问的响应式依赖。以后，只要这些依赖发生变化，回调函数就会再次执行。更棒的是，当组件卸载时，watchEffect 还会自动停止监听，避免内存泄漏。

effect 函数：响应式系统的核心

要理解 watchEffect 的实现，首先要搞清楚 effect 函数。 effect 函数是 Vue 响应式系统的基石，它负责创建和管理副作用函数，并建立副作用函数和响应式数据之间的依赖关系。

// 伪代码，简化版 effect 函数
function effect(fn: Function, options: { scheduler?: Function, onStop?: Function } = {}) {
  const effectFn = () => {
    cleanup(effectFn); // 清除之前的依赖
    activeEffect = effectFn; // 将当前 effectFn 设置为激活状态
    const res = fn(); // 执行副作用函数，收集依赖
    activeEffect = undefined; // 恢复激活状态
    return res;
  };

  effectFn.deps = []; // 用于存储依赖集合
  effectFn.stop = () => {
    cleanup(effectFn);
    options.onStop?.(); // 执行 onStop 回调
  };

  if (options.scheduler) {
    effectFn.scheduler = options.scheduler;
  }
  effectFn(); // 立即执行一次
  return effectFn;
}

let activeEffect: Function | undefined;

function cleanup(effectFn: any) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const dep: Set<any> = effectFn.deps[i];
    dep.delete(effectFn); // 从所有依赖的 Set 中移除当前 effectFn
  }
  effectFn.deps.length = 0; // 清空 effectFn 的依赖列表
}

// 假设的 track 函数，用于收集依赖
function track(target: object, key: string | symbol) {
  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);
  }

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

// 假设的 trigger 函数，用于触发更新
function trigger(target: object, key: string | symbol) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

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

  dep.forEach((effectFn: Function) => {
    if (effectFn.scheduler) {
      effectFn.scheduler(); // 如果有 scheduler，则执行 scheduler
    } else {
      effectFn(); // 否则直接执行 effectFn
    }
  });
}

const targetMap = new WeakMap();

这个 effect 函数做了以下几件事：

创建 effectFn： 将传入的回调函数 fn 包装成一个 effectFn，方便后续的管理和控制。
cleanup： 在每次执行 effectFn 之前，先清除之前建立的依赖关系，避免重复触发更新。
activeEffect： 将当前正在执行的 effectFn 设置为全局激活状态 activeEffect，这样在 fn 内部访问响应式数据时，就可以通过 track 函数建立依赖关系。
执行 fn： 执行用户提供的回调函数 fn，这是依赖收集的关键步骤。
deps： 每个 effectFn 都有一个 deps 属性，用于存储它依赖的所有 Set 集合。
stop： 提供一个 stop 方法，用于停止监听，并执行 onStop 回调函数。
scheduler： 支持 scheduler 选项，用于控制更新的时机。
立即执行： 默认情况下，effectFn 会立即执行一次。

watchEffect 的实现：effect 的马甲

现在，我们来看看 watchEffect 的真面目。其实，watchEffect 就是对 effect 函数的一个封装，它主要负责处理一些额外的逻辑，例如：

自动处理停止逻辑
提供一些配置选项

// 伪代码，简化版 watchEffect 函数
function watchEffect(effect: Function, options: { flush?: 'pre' | 'post' | 'sync', onTrack?: Function, onTrigger?: Function, onStop?: Function } = {}) {
  let cleanup: Function | undefined;

  const job = () => {
    effectFn();
  };

  const effectFn = effect(
    () => {
      // 注册清理函数
      if (cleanup) {
        cleanup();
      }
      const onInvalidate = (fn: Function) => {
        cleanup = fn;
      };
      effect(onInvalidate);
    },
    {
      scheduler: job,
      onStop: () => {
        options.onStop?.();
      },
    }
  );

  return () => {
    effectFn.stop();
  };
}

让我们来分解一下：

cleanup： watchEffect 内部维护一个 cleanup 函数，用于在每次执行副作用函数之前清理上一次的副作用。
job： 定义一个 job 函数，用于执行 effectFn。这个 job 函数会作为 scheduler 传递给 effect 函数。
effectFn： 调用 effect 函数，传入一个包装后的回调函数。这个包装后的回调函数会先执行 cleanup 函数，然后执行用户提供的副作用函数，并注册一个新的 cleanup 函数。
onInvalidate： 提供一个 onInvalidate 函数，允许用户注册一个清理函数，该函数会在下次副作用函数执行之前执行。这对于处理异步操作非常有用，例如取消一个未完成的请求。
options： 接收一个 options 对象，用于配置 watchEffect 的行为。例如，flush 选项可以控制更新的时机，onTrack 和 onTrigger 选项可以用于调试依赖收集和触发过程，onStop 选项可以在停止监听时执行一些清理操作。
返回值： 返回一个停止函数，允许用户手动停止监听。

依赖收集的魔术：track 函数的功劳

watchEffect 能够自动收集依赖的关键在于 track 函数。当你在 watchEffect 的回调函数中访问响应式数据时，track 函数会被调用，它会将当前的 effectFn 添加到响应式数据的依赖集合中。

// 伪代码，简化版 track 函数
function track(target: object, key: string | symbol) {
  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);
  }

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

track 函数的逻辑如下：

检查 activeEffect： 首先检查是否存在激活的 effectFn。如果没有，说明当前不在 effect 函数的执行上下文中，不需要进行依赖收集。
获取 depsMap： 从 targetMap 中获取当前 target 对应的 depsMap。 targetMap 是一个 WeakMap，用于存储所有响应式对象和它们的 depsMap 之间的映射关系。
获取 dep： 从 depsMap 中获取当前 key 对应的 dep。 depsMap 是一个 Map，用于存储所有 key 和它们的 dep 之间的映射关系。 dep 是一个 Set，用于存储所有依赖于当前 target 和 key 的 effectFn。
添加依赖： 将当前的 activeEffect 添加到 dep 中。
存储依赖： 将当前的 dep 添加到 activeEffect.deps 中。

自动停止的秘密：stop 函数的威力

watchEffect 能够自动停止监听的关键在于 stop 函数。当组件卸载时，watchEffect 会调用 stop 函数，该函数会执行以下操作：

cleanup： 清除所有与当前 effectFn 相关的依赖关系。
onStop： 执行用户提供的 onStop 回调函数。

// 伪代码，简化版 stop 函数
function stop(effectFn: any) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const dep: Set<any> = effectFn.deps[i];
    dep.delete(effectFn); // 从所有依赖的 Set 中移除当前 effectFn
  }
  effectFn.deps.length = 0; // 清空 effectFn 的依赖列表
}

一个完整的例子

为了更好地理解 watchEffect 的工作原理，我们来看一个完整的例子：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

watchEffect(() => {
  console.log('Count changed:', count.value);
  // 可以在这里执行一些副作用，例如发送网络请求
});
</script>

在这个例子中，watchEffect 会自动监听 count 的变化。每次 count 的值发生变化时，watchEffect 的回调函数就会执行，并在控制台中打印出 Count changed: 和 count 的值。

总结：watchEffect 的精髓

watchEffect 的精髓在于：

自动依赖收集： 通过 effect 函数和 track 函数，自动追踪回调函数中访问的响应式数据。
自动停止监听： 通过 stop 函数，在组件卸载时自动停止监听，避免内存泄漏。
简洁易用： 无需显式指定依赖源，简化了代码编写。

watchEffect 和 watch 的区别

特性	`watchEffect`	`watch`
依赖指定	自动收集	需要显式指定
立即执行	是	可以通过 `immediate` 选项控制
获取旧值	无法直接获取旧值	可以获取新值和旧值
使用场景	简单的副作用执行，不需要精确控制依赖关系	需要精确控制依赖关系，或者需要获取旧值

注意事项

避免在 watchEffect 的回调函数中修改响应式数据，否则可能导致无限循环。
watchEffect 的回调函数应该尽量保持纯粹，避免产生不必要的副作用。
如果需要更精确地控制依赖关系，或者需要获取旧值，请使用 watch API。

高级用法

watchEffect 还提供了一些高级用法，例如：

flush 选项： 可以控制更新的时机，例如 pre、post 和 sync。
onTrack 和 onTrigger 选项： 可以用于调试依赖收集和触发过程。
onStop 选项： 可以在停止监听时执行一些清理操作。

总结

watchEffect 是 Vue 3 中一个非常方便的 API，它简化了副作用函数的编写，并自动处理了依赖收集和停止监听的逻辑。通过深入理解 watchEffect 的实现原理，我们可以更好地利用它来构建高效、可维护的 Vue 应用。

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

发表回复 取消回复

发表回复取消回复