Vue组件销毁时内存泄漏的核心是未及时清理异步操作、事件监听器、定时器及第三方资源；需在unmounted钩子中主动清除定时器、中断请求、解绑事件、调用第三方库destroy方法并停止watch等。

Vue组件销毁时内存泄漏，核心在于未及时清理异步操作、事件监听器、定时器或第三方库绑定的资源。使用 unmounted 钩子是关键，但它不是“自动兜底”，而是需要你主动编写清理逻辑。

清理定时器和异步请求

在 setup 中启动的 setInterval、setTimeout 或未完成的 Promise（如 API 请求），若组件已卸载却还在回调中操作响应式数据，就会触发警告甚至内存泄漏。

• 用 ref 保存定时器 ID，在 unmounted 中 clearTimeout / clearInterval
• 对 axios 等请求，建议配合 AbortController 或取消令牌（cancel token）中断挂起请求
• 避免在 then/catch 中直接修改已卸载组件的 state —— 可加一个 isMounted 标记（但更推荐用 abort 方式）

解绑全局或自定义事件监听器

手动通过 window.addEventListener、EventBus、mitt 实例或第三方库（如 Map SDK）添加的监听器，不会随组件自动移除。

• 在 onMounted 中绑定事件，在 unmounted 中严格对应调用 removeEventListener
• 使用 mitt 时，保存 emitter.on 的返回值（即 off 函数），在 unmounted 中执行它
• 地图、图表类组件常需 destroy() 或 dispose()，务必查阅对应文档并在 unmounted 中调用

释放大型引用和观察者

显式创建的 watch、watchEffect、computed（尤其带副作用的）、或持有大量数据的 ref，虽 Vue 通常会自动清理，但在复杂嵌套或手动 retain 场景下仍需留意。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• watch / watchEffect 返回的停止函数，应在 unmounted 中调用
• 避免将响应式对象赋值给 window 或全局对象（如 window.myData = reactive(...)）
• 大数组/对象缓存应设为 null 或用 WeakMap 管理，防止意外强引用

检查第三方库的生命周期适配

不少 UI 库或工具库（如 ECharts、Leaflet、Monaco Editor）有自己的实例管理机制，不遵循 Vue 生命周期。

• ECharts：必须调用 chart.dispose()
• Monaco Editor：调用 editor.dispose()
• Leaflet：调用 map.remove()
• 确认库是否提供 Vue 封装版（如 vue-echarts），它们通常已内置生命周期处理

unmounted 不是魔法开关，而是你掌控资源释放的明确时机。写清楚每一条清理逻辑，比依赖框架自动回收更可靠。不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！