阐述 Vue 3 源码中 `stop` 函数如何实现对响应式副作用的精准清理，以及它在 `unmounted` 钩子中的应用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

晚上好各位！今天咱们来聊聊 Vue 3 源码里一个挺关键的函数，stop。别看它名字简单，作用可不小，是Vue 3响应式系统里负责“止损”，精准清理副作用的利器。咱们的讲座就围绕它展开，看看它是怎么工作的，以及在组件卸载的时候怎么发挥作用。

一、响应式系统的“副作用”是个啥？

在深入 stop 之前，先得搞清楚什么是“副作用”。简单来说，在 Vue 3 的响应式系统里，副作用就是那些“依赖”于响应式数据，并且会在这些数据改变时自动执行的代码。

想想 computed 计算属性，或者 watch 监听器。它们都“依赖”着一些响应式数据，当这些数据变化时，它们内部的函数就会重新执行。这就是副作用。

// 一个简单的响应式数据
const count = ref(0);

// 一个简单的副作用：每次 count 改变，都打印出来
effect(() => {
  console.log("Count is:", count.value);
});

// 修改 count 的值
count.value++; // 这会触发副作用，打印 "Count is: 1"

effect 函数创建的就是一个副作用。每次 count.value 改变，console.log 就会被执行。这看起来很方便，但是，如果我们不及时清理这些副作用，它们就会一直存在，占用资源，甚至引发内存泄漏。

二、stop 函数：副作用的“终结者”

stop 函数的作用，就是停止一个副作用的执行。它会把副作用从所有依赖项的依赖列表中移除，这样，即使响应式数据改变，这个副作用也不会再被触发。

我们先来看一下 stop 函数的简化版源码（为了便于理解，略去了一些细节）：

function stop(effect) {
  if (effect.active) { // 只有 active 的 effect 才能被 stop
    cleanupEffect(effect);  // 清理副作用
    effect.active = false; // 标记为 inactive，不再执行
  }
}

function cleanupEffect(effect) {
  const { deps } = effect; // deps 存储了所有依赖项
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect); // 从每个依赖项的依赖列表中移除 effect
    }
    deps.length = 0; // 清空 deps 数组
  }
}

这段代码做了两件事：

cleanupEffect(effect): 核心在于清理 effect.deps，它存储了所有这个 effect 依赖的 Set 集合。这个函数遍历 effect 依赖的所有 Set，然后从每个 Set 中删除当前的 effect。这样，当响应式数据改变时，就不会再通知到这个 effect 了。
effect.active = false: 将 effect 标记为 inactive。即使响应式数据发生了改变，并且触发了依赖项的通知，这个 effect 也不会再执行。这是一个额外的安全措施。

三、stop 的实际应用：一个例子

为了更好地理解 stop 的作用，我们来看一个实际的例子。假设我们有一个组件，它会监听一个响应式数据，并且在组件卸载时停止监听。

<template>
  <div>
    Count: {{ count }}
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, effect, stop } from 'vue';

export default {
  setup() {
    const count = ref(0);
    let effectFn = null; // 用于存储 effect 函数

    onMounted(() => {
      // 创建一个副作用，监听 count 的变化
      effectFn = effect(() => {
        console.log("Count changed:", count.value);
      });
    });

    onUnmounted(() => {
      // 在组件卸载时，停止副作用
      stop(effectFn);
    });

    // 定时器，每秒增加 count 的值
    setInterval(() => {
      count.value++;
    }, 1000);

    return {
      count,
    };
  },
};
</script>

在这个例子中，onMounted 钩子函数创建了一个副作用，它会监听 count 的变化，并且在控制台打印出来。 onUnmounted 钩子函数则调用了 stop 函数，停止了这个副作用。

如果没有 stop 函数，当组件卸载后，这个副作用仍然会存在，并且会继续监听 count 的变化。这会导致内存泄漏，因为组件已经不存在了，但是它的副作用还在运行。

四、深入 effect 函数：stop 的幕后功臣

要彻底理解 stop，我们还需要稍微了解一下 effect 函数的内部机制。 effect 函数不仅仅是创建副作用，它还负责建立响应式数据和副作用之间的依赖关系。

下面是一个简化版的 effect 函数：

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

function effect(fn) {
  const effectFn = () => {
    try {
      activeEffect = effectFn; // 设置当前激活的 effect
      return fn(); // 执行副作用函数
    } finally {
      activeEffect = null; // 清除当前激活的 effect
    }
  };

  effectFn.deps = []; // 存储依赖项
  effectFn.active = true; // 标记为 active

  effectFn(); // 立即执行一次副作用

  return effectFn;
}

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

activeEffect: 使用一个全局变量 activeEffect 来记录当前正在执行的 effect。在副作用函数执行期间，activeEffect 指向当前的 effectFn。
effectFn.deps = []: 为每个 effectFn 创建一个 deps 数组，用于存储这个 effect 依赖的所有 Set 集合。
effectFn.active = true: 标记 effectFn 为 active，表示它正在运行。
effectFn(): 立即执行一次副作用函数。

关键在于 activeEffect 变量。当副作用函数执行时，如果它访问了任何响应式数据，那么这个响应式数据就会“记住”当前的 activeEffect。具体来说，响应式数据的 get 拦截器会把当前的 activeEffect 添加到自己的依赖列表中。

五、响应式数据的 get 拦截器：依赖收集的关键

当访问一个响应式数据时，会触发它的 get 拦截器。这个拦截器会把当前的 activeEffect 添加到这个响应式数据的依赖列表中。

// 假设我们已经创建了一个响应式对象 target
const targetMap = new WeakMap(); // 用于存储所有响应式对象的依赖关系

function track(target, key) {
  if (activeEffect) { // 只有在 activeEffect 存在时，才进行依赖收集
    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);
    }

    trackEffects(dep);
  }
}

function trackEffects(dep) {
    dep.add(activeEffect); // 添加到 Set 中，自动去重
    activeEffect.deps.push(dep); // 将 dep 添加到 effect 的 deps 数组中
}

这段代码做了以下几件事：

targetMap: 使用一个 WeakMap 来存储所有响应式对象的依赖关系。 WeakMap 的 key 是响应式对象，value 是一个 Map。
depsMap: Map 的 key 是响应式对象的属性，value 是一个 Set。
dep: Set 存储了所有依赖于这个属性的 effect 函数。
dep.add(activeEffect): 将当前的 activeEffect 添加到 Set 中。 Set 会自动去重，所以同一个 effect 不会被添加多次。
activeEffect.deps.push(dep): 将 dep 添加到 activeEffect 的 deps 数组中。这样，effect 函数就知道自己依赖了哪些 Set 集合。

六、stop 与 unmounted 钩子：完美配合，防止内存泄漏

现在，我们再回到 stop 函数。当组件卸载时，onUnmounted 钩子函数会调用 stop 函数，停止所有与组件相关的副作用。

stop 函数会遍历 effect.deps 数组，然后从每个 Set 中删除当前的 effect。这样，当响应式数据改变时，就不会再通知到这个 effect 了。同时，effect.active 会被设置为 false，防止 effect 再次执行。

如果没有 stop 函数，这些副作用会一直存在，占用资源，甚至引发内存泄漏。 stop 函数就像一个“清理工”，负责把这些“垃圾”清理干净。

七、stop 函数的优点：精准清理，避免误伤

stop 函数的优点在于它的精准性。它只会停止与组件相关的副作用，而不会影响到其他组件的副作用。

假设我们有两个组件，它们都依赖于同一个响应式数据。当第一个组件卸载时，我们只想停止与第一个组件相关的副作用，而不想影响到第二个组件。

stop 函数可以做到这一点，因为它只会停止与当前 effect 相关的依赖关系。

八、总结：stop 函数是 Vue 3 响应式系统的“止损阀”

stop 函数是 Vue 3 响应式系统的一个重要组成部分。它负责停止副作用的执行，防止内存泄漏，提高性能。

在组件卸载时，onUnmounted 钩子函数会调用 stop 函数，停止所有与组件相关的副作用。这是一种良好的编程习惯，可以避免很多潜在的问题。

我们用一张表格来总结一下 stop 函数的关键点：

功能	描述	作用
停止副作用	从所有依赖项的依赖列表中移除副作用，并标记为 inactive。	防止内存泄漏，提高性能。
精准清理	只停止与当前组件相关的副作用，不会影响到其他组件。	保证系统的正确性。
`unmounted` 应用	在组件卸载时，`onUnmounted` 钩子函数会调用 `stop` 函数。	确保组件卸载后，相关的副作用也被清理干净。
依赖关系清理	遍历 `effect.deps` 数组，从每个 `Set` 中删除当前的 `effect`。	切断响应式数据与副作用之间的联系。
`active` 标记	将 `effect.active` 设置为 `false`。	防止 `effect` 再次执行。

总而言之，stop 函数是 Vue 3 响应式系统的“止损阀”，它能够在关键时刻发挥作用，保证系统的稳定性和性能。理解 stop 函数的原理，有助于我们更好地理解 Vue 3 的响应式系统，并且写出更高效、更健壮的 Vue 应用。

好了，今天的讲座就到这里。希望大家对 stop 函数有了更深入的了解。感谢各位的参与！以后有机会再和大家分享更多 Vue 3 源码相关的知识。

发表回复 取消回复

发表回复取消回复