beforedestroy 是 vue 2 中清理定时器与事件监听的最可靠时机，此时 this 可用、实例完整；需在 data 中声明引用（如 timer: null）、handler 用命名函数、$on/$off 配对，并避免在 destroyed 或 keep-alive 场景误用。
在 Vue 2 中，beforeDestroy 是清理定时器和事件监听的**最可靠时机**——此时组件实例完整可用，this 有效，所有响应式数据、方法和 DOM 状态都仍可安全访问。
必须提前保存引用，才能精准配对清理
清理动作能否生效，关键在于“创建时存得下，销毁时找得到”。不能靠猜测或临时生成函数，必须显式保存唯一、可复用的引用：
-
定时器：在
data中声明初始值（如timer: null），mounted或created中赋值为setInterval/setTimeout返回的 ID -
DOM 事件监听器：handler 必须是命名函数（不能是箭头函数、内联写法或每次重新定义的函数），确保
removeEventListener能传入完全相同的函数引用 -
Vue 自定义事件：用
this.$on绑定的事件，必须用this.$off解绑，且参数需与绑定时一致（事件名 + 同一回调函数）
典型安全写法（Vue 2 Options API）
以下结构兼顾可读性与健壮性，覆盖常见场景：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
export default {
data() {
return {
timer: null,
resizeHandler: null
}
},
created() {
this.timer = setInterval(() => {
console.log('每秒执行')
}, 1000)
},
mounted() {
// 命名函数，可复用
this.resizeHandler = () => {
console.log('窗口尺寸变化')
}
window.addEventListener('resize', this.resizeHandler)
// Vue 自定义事件监听
this.$on('user-login', this.handleLogin)
},
methods: {
handleLogin(payload) {
console.log('收到登录事件', payload)
}
},
beforeDestroy() {
// 清理定时器
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
// 移除 DOM 监听器
if (this.resizeHandler) {
window.removeEventListener('resize', this.resizeHandler)
this.resizeHandler = null
}
// 解绑 Vue 自定义事件
this.$off('user-login', this.handleLogin)
}
}
容易出错的几种情况
很多内存泄漏不是没写清理逻辑，而是写法不严谨导致清理失效：
- 在
mounted里用箭头函数写window.addEventListener('resize', () => {...})→beforeDestroy无法传入相同引用去移除 - 反复调用
startTimer()却没清旧 timer，导致this.timer被覆盖 → 旧定时器 ID 丢失，永久泄漏 - 在
destroyed钩子中清理 → 此时组件实例已部分失活，this可能不可靠，甚至报Cannot read property 'xxx' of null - 使用
keep-alive包裹组件时仍用beforeDestroy→ 实际不会触发该钩子，应改用deactivated清理，activated恢复
补充：需要一并清理的其他资源
除了定时器和事件监听，以下资源也应在 beforeDestroy 中释放：
-
第三方库实例：如 ECharts 实例调用
chart.dispose()，Mapbox 的map.remove()，Swiper 的swiper.destroy() -
手动创建的 Promise 或订阅：如
axios.cancelToken、EventSource关闭、RxJSSubscription.unsubscribe() -
全局状态监听：如 Vuex 的
store.watch返回的注销函数，需显式调用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
