你的 Vue 组件正在偷偷吃掉内存！5 个常见的内存泄漏陷阱与修复方案

前端Hardy
0 阅读3分钟

上周，我们收到用户反馈：“你们的后台系统，用一天后 Chrome 占了 4GB 内存！”

打开 DevTools 的 Memory 面板，一拍快照——
已分离的 DOM 节点（Detached DOM trees）堆积如山，组件实例成百上千……

问题不在业务逻辑，而在 “你以为组件销毁了，其实它还在”。

今天，我就带你揪出 Vue 3 项目中 5 个最隐蔽的内存泄漏陷阱，并给出一行代码就能修复的方案。尤其第 3 个，90% 的人都中过招。

先搞懂：Vue 组件什么时候会“泄漏”？

理想情况下，组件卸载时：

  • 响应式数据自动清理
  • 事件监听器自动移除
  • 定时器/异步任务自动取消

但现实是：如果你手动绑定了外部资源，Vue 不会帮你清理！

记住：Vue 只管理“自己创建的东西”，不管理你“借来的资源”。

陷阱 1：忘记清理全局事件监听器

// 危险！组件卸载后，window.resize 依然触发 oldHandler
onMounted(() => {
  const handleResize = () => { /* ... */ };
  window.addEventListener('resize', handleResize);
});

修复：在 onUnmounted 中移除

onMounted(() => {
  const handleResize = () => { /* ... */ };
  window.addEventListener('resize', handleResize);
  
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });
});

进阶技巧：封装成 composable

// composables/useEventListener.ts
export function useEventListener(target, event, handler) {
  onMounted(() => target.addEventListener(event, handler));
  onUnmounted(() => target.removeEventListener(event, handler));
}

陷阱 2：未取消的定时器 or 异步请求

// 组件销毁后，setTimeout 仍会执行，可能操作已销毁的 ref
onMounted(() => {
  setTimeout(() => {
    someRef.value = 'updated'; // Ref 已失效，但 JS 仍在跑
  }, 5000);
});

修复：用 AbortController 或 isMounted 标志

onMounted(() => {
  const timer = setTimeout(() => {
    if (!isUnmounted) someRef.value = 'updated';
  }, 5000);

  onUnmounted(() => {
    clearTimeout(timer);
    isUnmounted = true;
  });
});

更优雅：用 AbortSignal（适用于 fetch / WebSocket）

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });

onUnmounted(() => controller.abort());

陷阱 3：第三方库实例未销毁（最常见！）

比如 ECharts、Monaco Editor、Mapbox……

// 组件卸载了，但 echarts 实例还在内存中持有 DOM 引用
let chart;
onMounted(() => {
  chart = echarts.init(dom);
});

修复：调用库提供的 destroy 方法

onMounted(() => {
  chart = echarts.init(dom);
});

onUnmounted(() => {
  chart?.dispose(); // 关键！
  chart = null;
});

如果库没提供 destroy？用 markRaw + 手动置 null（见下文技巧）

陷阱 4：响应式对象持有外部引用

const state = reactive({
  element: document.getElementById('my-el') // 持有 DOM 引用
});

即使组件卸载，state 若被其他地方引用（如全局缓存），整个 DOM 树都无法 GC。

修复：避免将非响应式对象（DOM、第三方实例）放入 reactive/ref

// 用 shallowRef 或普通变量
const element = document.getElementById('my-el'); // 普通变量，无响应式包裹
const chart = shallowRef(null); // 内部不递归响应式

原则：只有需要“驱动视图更新”的数据，才放进响应式系统。

陷阱 5：闭包导致的隐式引用

onMounted(() => {
  const largeData = new Array(100000).fill('data');
  
  const callback = () => {
    console.log(largeData.length); // 闭包持有 largeData
  };

  someGlobalEmitter.on('event', callback);
  
  // 忘记在 onUnmounted 中 off！
});

即使组件卸载，callback 仍被全局 emitter 持有 → largeData 无法释放。

修复：确保移除所有外部注册

onUnmounted(() => {
  someGlobalEmitter.off('event', callback);
});

自查清单：上线前必做 3 件事

  1. 打开 Chrome DevTools → Memory → 拍快照

    • 切换路由多次，看组件实例是否持续增长
    • 搜索 “Detached” 查看游离 DOM

  2. 审查所有 onMounted

    • 是否有 addEventListener / setInterval / 第三方 init？
    • 是否都有对应的 onUnmounted 清理？

  3. 避免在 reactive 中存非 UI 状态

    • 图表实例、WebSocket、大型配置 → 用 shallowRef 或普通变量

最后说两句

内存泄漏不像报错那样“大声提醒你”，
它像温水煮青蛙——等你发现时，用户已经流失了。

但只要记住一句话：

“你借的资源，你负责还。”

Vue 会管好自己的事，剩下的，靠你。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

avatar
文章
阅读
粉丝