Vue3 组件卸载后怎么防止内存泄漏？

Question

Vue3 组件卸载后怎么防止内存泄漏？

仓乃文 · Accepted Answer

组件中注册的全局事件、定时器、WebSocket 连接等不会随组件卸载自动清除，导致回调继续执行、数据持续更新、DOM 引用无法回收。必须在 onUnmounted 或 onScopeDispose 中清理所有副作用。

常见泄漏场景和清理：
```javascript
import { onUnmounted, onScopeDispose } from "vue";

// 1. 定时器
const timer = setInterval(() => {}, 1000);
onUnmounted(() => clearInterval(timer));

// 2. 全局事件
const handler = (e) => {};
window.addEventListener("resize", handler);
onUnmounted(() => window.removeEventListener("resize", handler));

// 3. WebSocket
const ws = new WebSocket("ws://...");
ws.onmessage = (e) => {};
onUnmounted(() => ws.close());
```

封装为 Composable 自动清理：
```javascript
export function useEventListener(target, event, handler) {
  onMounted(() => target.addEventListener(event, handler));
  onUnmounted(() => target.removeEventListener(event, handler));
}
// 使用：组件卸载自动清理
useEventListener(window, "resize", handleResize);
```

补充说明：
- 组件内的 ref 绑定的事件（如 @click）Vue 会自动清理，不需要手动处理
- 需要手动清理的：window 事件、document 事件、setInterval、WebSocket、第三方库实例
- 优先用 onScopeDispose 而非 onUnmounted，Composable 中更通用
- VueUse 库封装了大量自动清理的 Composable，推荐使用
- 可用 Chrome DevTools Memory 面板检测内存泄漏