Vue3 中 EffectScope 的使用方法

在 Vue3 的响应式系统中，EffectScope 是一个强大的工具，它为开发者提供了更细粒度的响应式副作用管理。了解并合理运用 EffectScope，能够显著提升代码的可维护性和性能。

EffectScope 本质上是一个作用域，它可以用来收集和管理一组响应式副作用函数，比如 computed 和 watch 等。在一个大型应用中，副作用函数可能分布在各个角落，使用 EffectScope 可以将相关的副作用函数组织在一起，方便统一处理。

创建一个 EffectScope 实例非常简单。通过调用 effectScope 函数即可创建一个新的作用域，例如：

import { effectScope } from 'vue';
const scope = effectScope();

接下来，可以在这个作用域内运行副作用函数。使用 scope.run 方法来包裹需要运行的副作用代码，示例如下：

scope.run(() => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);
  watch(count, () => {
    console.log('Count has changed:', count.value);
  });
});

在上述代码中，count、doubleCount 以及相关的 watch 函数都被包含在 scope.run 内部，它们都属于这个 EffectScope。

当不再需要这些副作用时，可以通过调用 scope.stop() 来停止整个作用域内的所有副作用。这在组件销毁或某些特定场景下非常有用，能够有效避免内存泄漏：

scope.stop();

在组件中使用 EffectScope 也很常见。例如，在一个组件内创建一个局部的 EffectScope，当组件卸载时停止该作用域：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

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

const scope = effectScope();

scope.run(() => {
  // 副作用代码
});

onUnmounted(() => {
  scope.stop();
});
</script>

Vue3 的 EffectScope 为开发者提供了强大的副作用管理能力。通过合理地组织和控制响应式副作用函数，我们可以让代码更加清晰、高效，减少潜在的问题。无论是小型项目还是大型应用，掌握 EffectScope 的使用方法都能为开发工作带来诸多便利。