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