如何利用 Vue 3 的 `effectScope` 机制，设计一个可复用、可管理的插件或 Hook，用于处理复杂的响应式副作用？

哈喽大家好，我是你们的老朋友，今天咱们来聊聊 Vue 3 里的一个宝贝疙瘩：effectScope。这玩意儿听起来高大上，但其实用起来简单得很，就像你家的扫地机器人，设定好路线，它就帮你把地扫得干干净净。

咱们的目标是：利用 effectScope，设计一个可复用、可管理的插件或 Hook，专门用来处理那些复杂的、让人头疼的响应式副作用。保证用完之后，你的代码就像刚洗完澡一样清爽！

第一部分：副作用是个啥？为啥需要EffectScope？

首先，咱们得搞清楚啥是“副作用”。别想歪了，这儿说的不是吃了药的副作用，而是指函数或者代码片段，除了返回结果之外，还偷偷摸摸地干了别的事儿，比如：

• 修改了全局变量
• 发起了网络请求
• 操作了 DOM
• 订阅了事件

这些都算是副作用。在 Vue 的世界里，响应式副作用通常指那些依赖于响应式数据的操作。当这些数据发生变化时，我们希望这些操作也能自动更新。watch、computed 都是处理响应式副作用的好帮手，但当副作用变得复杂、数量变多时，管理起来就容易一团糟。

举个例子，假设咱们要实现一个根据用户在线状态显示不同提示信息的功能。

<template>
  <div>
    <p v-if="isOnline">您在线上！</p>
    <p v-else>您离线了...</p>
  </div>
</template>

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

const isOnline = ref(navigator.onLine);

window.addEventListener('online', () => {
  isOnline.value = true;
});

window.addEventListener('offline', () => {
  isOnline.value = false;
});

// 组件卸载时，需要手动移除事件监听器，否则会造成内存泄漏
onUnmounted(() => {
  window.removeEventListener('online', () => {});
  window.removeEventListener('offline', () => {});
});
</script>

这段代码本身没啥问题，但是如果我们的组件变得更复杂，需要监听更多的事件，或者执行更多的响应式副作用，那么onUnmounted 里的清理工作将会变得非常繁琐，而且容易出错。

这时候，effectScope 就派上用场了。它可以将一组相关的响应式副作用放到一个“作用域”里管理，统一创建，统一销毁，就像一个垃圾桶，用完直接扔掉，省心省力。

第二部分：EffectScope的基本用法

effectScope 的用法其实很简单，核心就两个 API：

• effectScope()：创建一个 effect scope 实例。
• scope.run(fn)：在 scope 内部执行函数 fn，任何在这个函数内部创建的响应式副作用（比如 watch、computed）都会被自动收集到这个 scope 中。
• scope.dispose()：销毁 scope，它会自动停止 scope 内所有收集到的响应式副作用。

咱们来改造一下上面的例子，用上 effectScope：

<template>
  <div>
    <p v-if="isOnline">您在线上！</p>
    <p v-else>您离线了...</p>
  </div>
</template>

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

const isOnline = ref(navigator.onLine);
const scope = effectScope();

scope.run(() => {
  window.addEventListener('online', () => {
    isOnline.value = true;
  });

  window.addEventListener('offline', () => {
    isOnline.value = false;
  });
});

onUnmounted(() => {
  scope.dispose(); // 组件卸载时，销毁 scope，自动移除事件监听器
});
</script>

可以看到，咱们把事件监听器的注册放到了 scope.run() 里面。这样，当组件卸载时，只需要调用 scope.dispose()，所有注册的事件监听器都会被自动移除，再也不用手动一个个清理了。爽不爽？

第三部分：设计可复用的插件/Hook

接下来，咱们要更上一层楼，设计一个可复用、可管理的插件或 Hook，来处理更复杂的响应式副作用。

首先，咱们定义一个 Hook，名字就叫 useResponsiveEffect 吧：

import { effectScope, onScopeDispose } from 'vue';

export function useResponsiveEffect(setup) {
  const scope = effectScope();

  scope.run(() => {
    setup();
  });

  onScopeDispose(() => {
    scope.dispose();
  });
}

这个 Hook 接收一个 setup 函数作为参数，在这个函数内部，你可以定义任何响应式副作用。useResponsiveEffect 会负责创建 effectScope，并在组件卸载时自动销毁它。

现在，咱们来用这个 Hook 改造一下之前的例子：

<template>
  <div>
    <p v-if="isOnline">您在线上！</p>
    <p v-else>您离线了...</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useResponsiveEffect } from './useResponsiveEffect';

const isOnline = ref(navigator.onLine);

useResponsiveEffect(() => {
  window.addEventListener('online', () => {
    isOnline.value = true;
  });

  window.addEventListener('offline', () => {
    isOnline.value = false;
  });
});
</script>

可以看到，代码变得更加简洁了。我们把事件监听器的逻辑放到了 useResponsiveEffect 的 setup 函数里，不再需要在 onUnmounted 中手动清理。

第四部分：更高级的用法：控制 EffectScope 的激活状态

有时候，我们可能需要更精细地控制 effectScope 的激活状态。比如，我们希望只有在某个条件满足时，才开始收集响应式副作用。

effectScope 提供了 active 属性来控制其激活状态。当 active 为 true 时，scope 处于激活状态，可以收集响应式副作用；当 active 为 false 时，scope 处于非激活状态，不会收集任何响应式副作用。

咱们来改造一下 useResponsiveEffect Hook，增加一个 active 参数：

import { effectScope, onScopeDispose, ref, watch } from 'vue';

export function useResponsiveEffect(setup, active = true) {
  const scope = effectScope();
  const isActive = ref(active);

  watch(isActive, (newActive) => {
    if (newActive && !scope.active) {
      scope.run(() => {
        setup();
      });
    } else if (!newActive && scope.active) {
      scope.dispose();
    }
  }, { immediate: true }); // 确保初始状态正确

  onScopeDispose(() => {
    if(scope.active) scope.dispose();
  });

  return isActive; // 返回一个ref, 允许组件控制激活状态
}

在这个版本中，我们增加了一个 active 参数，默认为 true。我们使用 watch 监听 active 值的变化，当 active 变为 true 时，我们才执行 setup 函数，开始收集响应式副作用；当 active 变为 false 时，我们销毁 scope，停止收集响应式副作用。

现在，咱们可以在组件中使用这个 Hook，并根据需要控制其激活状态：

<template>
  <div>
    <button @click="toggleActive">Toggle Active</button>
    <p v-if="isOnline && isActive">您在线上！</p>
    <p v-else>您离线了...</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useResponsiveEffect } from './useResponsiveEffect';

const isOnline = ref(navigator.onLine);
const isActive = useResponsiveEffect(() => {
  window.addEventListener('online', () => {
    isOnline.value = true;
  });

  window.addEventListener('offline', () => {
    isOnline.value = false;
  });
}, true); // 初始状态为激活

const toggleActive = () => {
  isActive.value = !isActive.value;
};
</script>

在这个例子中，我们使用 useResponsiveEffect 创建了一个响应式副作用，并将其初始状态设置为激活。我们还添加了一个按钮，点击它可以切换 isActive 的值，从而控制响应式副作用的激活状态。只有当 isActive 为 true 且 isOnline 为 true 时，才会显示 "您在线上！" 的提示信息。

第五部分：使用表格总结EffectScope的优势

为了更清晰地展示 effectScope 的优势，咱们用一个表格来总结一下：

特性	不使用 EffectScope	使用 EffectScope
代码复杂度	需要手动管理每个响应式副作用的生命周期，代码冗余，容易出错。	将相关的响应式副作用放到一个 scope 中管理，统一创建，统一销毁，代码简洁，易于维护。
内存泄漏风险	如果忘记手动清理某个响应式副作用，可能会导致内存泄漏。	销毁 scope 时，会自动停止 scope 内所有收集到的响应式副作用，避免内存泄漏。
可维护性	当响应式副作用数量变多时，管理起来非常困难，代码可读性差。	可以将不同的响应式副作用放到不同的 scope 中管理，提高代码的可读性和可维护性。
代码复用性	难以将一组相关的响应式副作用封装成可复用的组件或 Hook。	可以将一组相关的响应式副作用封装到 useResponsiveEffect 这样的 Hook 中，方便在不同的组件中复用。
控制激活状态	难以精细地控制响应式副作用的激活状态，需要在代码中手动判断。	可以通过 active 属性控制 effectScope 的激活状态，灵活地控制响应式副作用的执行时机。

第六部分：总结与展望

总而言之，effectScope 是 Vue 3 中一个非常实用的 API，它可以帮助我们更好地管理响应式副作用，提高代码的可读性、可维护性和可复用性。

通过本文的讲解，相信你已经掌握了 effectScope 的基本用法和高级技巧，可以将其应用到你的项目中，让你的代码更加优雅、健壮。

当然，effectScope 还有很多其他的用法，比如嵌套 effectScope、在 effectScope 中创建组件等等。希望你在实践中不断探索，发现 effectScope 更多的可能性。

好了，今天的讲座就到这里，希望对你有所帮助。咱们下次再见！