Vue中监听外部事件需在onUnmounted中手动解绑，否则导致内存泄漏；推荐封装useEventListener、显式调用watch/ watchEffect的stop函数，并按文档调用第三方库的destroy方法。
Vue 中监听事件（尤其是全局或 DOM 外部事件）必须在组件卸载时手动解绑，否则会持续持有组件引用，造成内存泄漏。Vue 本身不会自动帮你移除 addEventListener、ipcRenderer.on、setInterval 等外部资源监听，需要你主动清理。
用 onUnmounted 统一清理最稳妥
推荐在 setup 中使用 onUnmounted 钩子，在组件真正从 DOM 移除时执行解绑逻辑：
- 把事件监听器的移除函数（如
removeEventListener、ipcRenderer.removeListener）写在onUnmounted回调里 - 定时器 ID、第三方库实例等也在此处清除（
clearInterval、chart.dispose()） - 避免用箭头函数定义 handler——它每次渲染都新建，导致
removeEventListener无法匹配原函数
封装 useEventListener 更安全可靠
直接调用原生 API 容易遗漏或出错，建议用组合式函数封装：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 内部自动绑定
addEventListener，并在onUnmounted中配对调用removeEventListener - 支持传入任意 target（
window、ref、document），target 变化时还能自动重新绑定 - 减少重复代码，杜绝“加了没删”这类低级泄漏
watchEffect 和 watch 要显式 stop
watch 和 watchEffect 返回的 stop 函数不是可选的，是防止泄漏的关键出口：
- 即使写在
setup里，Vue 3 也会自动清理；但为逻辑清晰和跨场景复用，仍建议主动保存并绑定到onUnmounted - 在非组件作用域（如工具函数、composable 外部）中创建的监听器，Vue 不会自动管理，
stop()必须手动调用 - 可在回调中条件调用
stop()，实现“满足某值就停”或“只执行一次”
第三方库要查文档调 destroy 方法
像 ECharts、Lenis、Choices.js、WebSocket 实例等，内部持有大量 DOM、Canvas、连接或事件，v-if 或 unmount 并不等于销毁：
- 务必查阅该库文档，确认是否有
dispose()、destroy()、close()等方法 - 在
onUnmounted中显式调用，并注意顺序：先断开数据流（如取消请求），再销毁实例 - 动态挂载的浮层、弹窗等，卸载前应手动
el.remove()，避免残留节点被库继续引用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
