onBeforeUnmount 是清理定时器和全局事件监听的正确时机；需用 ref 存储 timer ID 并配对清除，全局事件须复用同一 handler 引用，keep-alive 场景需配合 onDeactivated 双保险。
在 Vue 3 单文件组件中，onBeforeUnmount 是清理定时器和全局事件监听的正确且最安全的时机——它在组件从 DOM 移除前触发，此时响应式数据、DOM 引用、函数上下文全部可用，能确保清理动作真正生效。
定时器清理：ref 存 ID + onBeforeUnmount 配对清除
不能把 timer ID 存在局部变量或闭包里，必须用 ref 声明并跨生命周期访问：
- 声明
const timer = ref(null)，类型建议为Ref<nodejs.timeout null></nodejs.timeout> - 在
onMounted或业务逻辑中启动：timer.value = setInterval(() => { /* ... */ }, 1000) - 在
onBeforeUnmount中检查并清除：if (timer.value) clearInterval(timer.value); timer.value = null - 清除后设为
null不仅防重复调用，也方便调试时判断状态是否已释放
全局事件监听清理：必须复用同一 handler 函数引用
用箭头函数或内联写法绑定事件，会导致 removeEventListener 无法匹配——因为每次都是新函数。正确做法是：
- 在
setup顶层定义具名函数：const handleScroll = () => { ... } onMounted(() => window.addEventListener('scroll', handleScroll))onBeforeUnmount(() => window.removeEventListener('scroll', handleScroll))- 如需动态管理多个事件，可用数组或 Map 存储
[type, handler]对，统一遍历解绑
keep-alive 场景要加 onDeactivated 双保险
被 <keep-alive> 包裹的组件不会触发 onBeforeUnmount（只是缓存，未卸载），所以轮询或监听逻辑需适配激活/失活流程：
立即学习“前端免费学习笔记（深入）”；
- 在
onActivated中启动定时器或监听器，并加 guard 判断是否已存在，避免重复开启 - 在
onDeactivated中立即清除：if (timer.value) clearInterval(timer.value); timer.value = null - 同时保留
onBeforeUnmount作为兜底，覆盖强制销毁、路由跳转等非缓存场景
别踩这些坑
很多“清理没生效”其实不是钩子没跑，而是写法不严谨：
-
onBeforeUnmount必须写在setup的顶层作用域，不能包在异步回调（如fetch().then()）里 - 不要等到
onUnmounted才清理——此时组件实例已销毁，ref可能失活，clearInterval虽不报错但可能清错或清空 - 避免反复调用
setInterval覆盖timer.value，导致旧定时器 ID 丢失，永远无法清除 - Vue 自定义事件（
emits）一般不用手动解绑，但父组件传入的v-on回调不属于组件内部，不在此列
