动态组件销毁前必须主动清理事件监听、定时器和第三方库实例，否则会导致内存泄漏或报错；需在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 或第三方容器，这类监听器不会随组件自动移除：
- 监听函数必须是具名函数（如
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
