Vue3 effectScope 怎么统一管理副作用作用域？

Question

仓乃文 · Accepted Answer

多个 Composable 创建的 watch、computed、watchEffect 等副作用散落各处，需要统一清理时很麻烦。effectScope 创建一个作用域，内部所有副作用可以一次性销毁，避免逐个手动清理。

统一管理副作用：
```javascript
import { effectScope, ref, watch, computed } from "vue";
const scope = effectScope();
scope.run(() => {
  const count = ref(0);
  watch(count, (v) => console.log(v));  // 自动收集到 scope
  const doubled = computed(() => count.value * 2);  // 也收集到 scope
  watchEffect(() => console.log(doubled.value));  // 同样收集
});

scope.stop();  // 一次性清理上面所有副作用
```

组件外使用：
```javascript
function createDashboard() {
  const scope = effectScope();
  const state = scope.run(() => {
    const data = useFetch(url);
    const filtered = useFilter(data);
    const stats = useStats(filtered);
    return { data, filtered, stats };
  });
  return { ...state, destroy: () => scope.stop() };
}
```

补充说明：
- effectScope 内的 watch/computed/watchEffect 都会被收集
- scope.stop() 一次性清理所有收集的副作用
- 适合插件、全局状态、WebSocket 连接等需要统一清理的场景
- getCurrentScope() 获取当前作用域，onScopeDispose 注册清理回调
- Vue 内部的组件 setup 本身就运行在 effectScope 中