Vue3 onScopeDispose 怎么自动清理副作用？

Question

仓乃文 · Accepted Answer

Composable 中注册的事件监听、定时器等需要在组件卸载时清理。onUnmounted 只能在组件内使用，onScopeDispose 在任何 effectScope 中都能用，包括独立的 Composable，确保副作用随作用域销毁自动清理。

Composable 自动清理：
```javascript
import { onScopeDispose } from "vue";
export function useInterval(fn, delay) {
  const timer = setInterval(fn, delay);
  onScopeDispose(() => clearInterval(timer));  // 作用域销毁时自动清理
  return { stop: () => clearInterval(timer) };
}
```

组件和独立作用域都生效：
```javascript
// 在组件中使用：组件卸载时自动清理
const { stop } = useInterval(() => console.log("tick"), 1000);

// 在独立作用域中使用
const scope = effectScope();
scope.run(() => {
  useInterval(() => console.log("tick"), 1000);
});
scope.stop();  // 触发 onScopeDispose，清理定时器
```

补充说明：
- onScopeDispose 在组件的 setup 中使用时，组件卸载会触发
- 在 effectScope.run() 中使用时，scope.stop() 会触发
- 比 onUnmounted 更通用，Composable 不需要关心自己是在组件还是独立作用域中运行
- 如果 Composable 可能脱离组件使用（如工具函数），优先用 onScopeDispose