beforeDestroy 是 Vue Options API 中组件销毁前执行清理的关键时机，此时 this 可靠，需配对清除定时器、DOM 事件监听器和 Vue 自定义事件；keep-alive 下应改用 deactivated/activated 钩子。
在 Vue Options API 中，beforeDestroy 是组件销毁前执行清理工作的关键时机。此时组件实例仍完全可用，this 可靠，适合安全地清除定时器、移除事件监听等副作用。
保存引用并配对清理
所有需清理的资源，必须先在 data 或 methods 中保存可访问的引用，确保创建与销毁动作一一对应：
- 定时器：用
data声明timer: null，mounted或created中赋值setInterval或setTimeout返回的 ID - DOM 事件监听器：handler 必须是命名函数（不能是箭头函数或内联写法），以便
removeEventListener能精准匹配移除 - Vue 自定义事件：使用
this.$on绑定的事件，需用this.$off解绑，传入相同事件名和回调函数
典型写法示例
以下是一个完整、安全的清理结构：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
export default {
data() {
return {
timer: null,
resizeHandler: null
}
},
created() {
this.timer = setInterval(() => {
console.log('tick')
}, 1000)
},
mounted() {
this.resizeHandler = () => {
console.log('窗口调整')
}
window.addEventListener('resize', this.resizeHandler)
this.$on('custom-event', this.handleCustomEvent)
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
if (this.resizeHandler) {
window.removeEventListener('resize', this.resizeHandler)
}
this.$off('custom-event', this.handleCustomEvent)
},
methods: {
handleCustomEvent() { /* ... */ }
}
}注意 keep-alive 场景
若组件被 <keep-alive></keep-alive> 包裹，beforeDestroy 不会触发。此时应改用 deactivated 钩子清理，并在 activated 中恢复：
立即学习“前端免费学习笔记（深入）”；
-
deactivated()中执行同beforeDestroy的清理逻辑 -
activated()中重新启动定时器或绑定监听器 - 避免在
deactivated后仍持有对已失活组件的引用
避免常见错误
这些操作看似简单，但容易出错：
- 在
destroyed中清理 —— 此时this已不可靠，可能报Cannot read property 'xxx' of null - 用箭头函数作为
addEventListener回调 —— 导致removeEventListener无法匹配移除 - 未置空 timer 引用，下次组件复用时重复清除或漏清
- 第三方库（如 ECharts）未调用
.dispose()或.destroy()
