onUnmounted 是 Vue 3 中清除定时器最标准可靠的时机，需用 ref 存储 timer ID 并在 onMounted 赋值、onUnmounted 清除；keep-alive 组件须配合 onActivated/onDeactivated，并用 AbortController 中止未完成请求。
在 Vue 3 中，onUnmounted 是清除定时器最标准、最可靠的时机——它在组件从 DOM 完全移除、实例销毁前触发，此时响应式数据、DOM 引用和函数上下文都仍可用，能确保 clearInterval 或 clearTimeout 真正生效。
定时器必须用 ref 或 reactive 存储 ID
不能把 timer ID 写在局部变量或闭包里，否则 onUnmounted 无法访问。正确做法是：
- 用
ref(null)声明，并显式标注类型（如Ref） - 在
onMounted中赋值：timer.value = setInterval(...) - 在
onUnmounted中检查并清除：if (timer.value) clearInterval(timer.value); timer.value = null
避免常见写法错误
很多“定时器没清掉”不是钩子没执行，而是逻辑写错了：
- onUnmounted 必须写在 setup 顶层，不能包裹在
fetch().then()或其他异步回调里 - 不要等到
onBeforeUnmount或onUnmounted之后再清理——此时已晚，但更关键的是：别用onUnmounted清理本该在卸载前就停的轮询（比如 keep-alive 场景） - 反复调用
setInterval覆盖timer.value，会导致旧 ID 丢失，永远无法清除
keep-alive 组件要额外处理
被 onUnmounted（只缓存，不销毁），所以仅靠它不够：
- 改用
onActivated启动定时器，并加 guard 判断是否已存在 - 在
onDeactivated中立即清除：if (timer.value) clearInterval(timer.value); timer.value = null - 同时保留
onUnmounted作为兜底，覆盖强制销毁、路由跳转等非缓存场景
配合 AbortController 处理异步轮询
如果定时器内执行的是 fetch 请求，光清定时器还不够——未完成的请求仍可能在组件销毁后返回并修改状态：
- 在 setup 中创建
const controller = new AbortController() - fetch 时传入
{ signal: controller.signal } - 在
onUnmounted中调用controller.abort()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
