动态组件销毁前必须主动清理事件监听、定时器和第三方库实例，否则会导致内存泄漏或报错；需在onBeforeUnmount中用ref保存定时器ID并清除，使用具名函数绑定全局事件并配对移除，调用第三方库的dispose/destroy方法，并手动解绑$on事件和清理watchEffect副作用。

动态组件销毁时，事件监听和定时器必须主动清理，否则会持续持有对已卸载组件的引用，引发内存泄漏、重复执行或 Cannot read property 'xxx' of null 报错。关键不是等它“消失”，而是在卸载前就断开所有外部连接。

定时器：用 ref 存 ID，onBeforeUnmount 清除

动态组件常因 v-if 或 切换而频繁挂载/卸载，定时器若没配对清除，极易累积：

• 用 ref（Vue 3）或 data 属性（Vue 2）保存 setTimeout/setInterval 返回的 ID，避免被覆盖或丢失
• 在 onBeforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中调用 clearTimeout/clearInterval
• 不推荐在 unmounted 或 destroyed 中清理——此时响应式数据可能已失活，this 不可靠

全局事件监听：函数引用要稳定，removeEventListener 要配对

动态组件里常监听 window、document 或第三方容器，这类监听器不会随组件自动移除：

python-flask-vue-creator

创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。

下载

• 监听函数必须是具名函数（如 methods 里的方法，或 setup 中定义的 const 函数），不能是箭头函数或内联写法
• removeEventListener 必须传入与 addEventListener 完全相同的函数引用 + 相同的 useCapture 参数
• 如果多次调用 addEventListener（比如重连逻辑），就要对应多次 removeEventListener，不能只清一次

第三方库实例：查文档，显式调用销毁方法

像 ECharts、MapLibre、Swiper 这类库，内部持有 DOM、Canvas 或长连接，仅靠 v-if 移除 DOM 并不释放资源：

• 在 onBeforeUnmount 中调用实例的 .dispose()、.destroy() 或 .close() 方法（具体名称以官方文档为准）
• 销毁前先断开数据流：如取消未完成请求、关闭 WebSocket、移除自定义事件订阅
• 动态组件若反复创建同一类实例，务必确保每次都有独立销毁路径，避免残留强引用

Vue 自定义事件与状态联动：注意 $on/$off 和响应式副作用

动态组件间通信常用事件总线或父级 v-on，这些也需要收口管理：

• 用 this.$on 绑定的事件，必须用 this.$off 解绑；Vue 3 中 emits 声明的事件无需手动解绑，但父组件传入的 @xxx 回调不属于此列
• 使用 watchEffect 时，若其内部启动了定时器或发起请求，需在清理函数中一并处理，不能依赖 Vue 自动回收
• 避免在 watch 回调里嵌套未清理的异步操作——动态组件切换快，容易堆积未终止任务

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