Vue组件销毁前必须主动清理定时器、全局DOM事件监听器、Vue自定义事件及第三方库实例，否则会导致内存泄漏等问题；Vue 2用beforeDestroy，Vue 3推荐onBeforeUnmount。
Vue 组件销毁时，若不主动清理定时器和事件监听，会持续持有对已卸载组件的引用，造成内存泄漏、重复执行、甚至 Cannot read property 'xxx' of null 报错。关键不是“等它销毁”，而是在卸载前就完成资源释放。
必须清理的四类资源
以下操作需在组件卸载钩子中执行，且必须确保清理动作与创建动作一一对应：
-
定时器（setInterval / setTimeout）：保存 ID 到 data 或 ref，卸载时调用
clearInterval或clearTimeout -
全局 DOM 事件监听器：如
window.addEventListener('resize', handler)，卸载时必须用removeEventListener移除，且传入的 handler 必须是同一函数引用（不能是箭头函数或内联函数） -
Vue 自定义事件监听：使用
this.$on绑定的事件，需用this.$off解绑；Vue 3 中若用emits+defineEmits，一般无需手动解绑，但父组件通过v-on传入的回调不在此列 -
第三方库实例：如 ECharts、Mapbox、Swiper 等，多数提供
.dispose()、.destroy()或.off('all')方法，应在卸载前显式调用
Vue 2 与 Vue 3 的清理位置差异
钩子名称和推荐写法不同，直接影响清理是否生效：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
Vue 2：推荐在
beforeDestroy中清理（destroyed钩子触发时组件实例已部分失活，this可能不可靠） -
Vue 3（Options API）：使用
beforeUnmount，语义更准确，此时组件仍完全可用 -
Vue 3（Composition API）：在
setup中导入onBeforeUnmount，并在其中注册清理逻辑，避免 this 上下文问题
容易踩坑的细节
很多内存泄漏不是没写清理，而是写法不严谨：
立即学习“前端免费学习笔记（深入）”；
- 用箭头函数绑定事件监听器 → 卸载时无法传入相同引用解绑
- 多次
addEventListener同一事件但只清一次 → 剩余监听器残留 - 定时器 ID 被覆盖（比如反复调用
startTimer）→ 旧 timer ID 丢失，无法清除 - 在
destroyed（Vue 2）或unmounted（Vue 3）中清理 → 此时this或响应式变量可能已失效，应优先选before类钩子
一个安全的定时器清理示例（Vue 3 Composition API）
使用 ref 存储 timer ID，配合 onBeforeUnmount 确保及时释放：
import { ref, onBeforeUnmount } from 'vue'
const timer = ref(null)
const start = () => {
if (timer.value) return
timer.value = setInterval(() => {
console.log('running...')
}, 1000)
}
onBeforeUnmount(() => {
if (timer.value) {
clearInterval(timer.value)
timer.value = null
}
})
</script>
