必须在 onBeforeUnmount 中销毁轮询定时器，因其触发时组件实例仍完整，可安全访问 ref、调用 clearInterval；而 onUnmounted 时响应式系统已开始释放，timer 可能失效导致内存泄漏或报错。
未读消息轮询定时器必须在组件卸载前销毁，否则会持续请求、占用内存，甚至导致“Cannot read property of null”报错。Vue 3 推荐用 onBeforeUnmount（不是 onUnmounted），因为此时组件实例仍完整可用，响应式数据、方法、DOM 引用都有效，清理最稳妥。
为什么选 onBeforeUnmount 而不是 onUnmounted
onUnmounted 触发时，组件已解绑、响应式系统开始释放，this 或 ref 可能已失效；而 onBeforeUnmount 是“卸载前最后一刻”，所有资源仍可安全访问和清理。
- onBeforeUnmount 中能正常读取 ref 存储的 timer ID、调用 clearInterval
- onUnmounted 中 timer 值可能为 undefined 或已被清空，clearInterval 失效或静默失败
- 轮询场景尤其敏感：一次漏清，就可能在后台持续发请求，影响接口限流和用户体验
定时器创建与销毁的正确配对写法
用 ref 存储 timer ID，确保创建和销毁操作一一对应；避免重复赋值覆盖旧 ID 导致无法清除。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在 onMounted 中启动轮询（不建议在 setup 顶层或 onCreated，因 DOM 尚未就绪）
- 用 ref(null) 初始化 timer，并在 setInterval 后立即赋值
- onBeforeUnmount 中先判断 timer.value 是否存在，再 clearInterval 并置 null
import { ref, onMounted, onBeforeUnmount } from 'vue'
const timer = ref(null)
onMounted(() => {
timer.value = setInterval(() => {
// 调用获取未读数的 API，例如：api.getUnreadCount()
}, 30000) // 30秒轮询一次
})
onBeforeUnmount(() => {
if (timer.value) {
clearInterval(timer.value)
timer.value = null
}
})
轮询逻辑增强：避免请求堆积和竞态问题
单纯 setInterval 可能出现上一次请求未完成、下一次又触发的问题，尤其在网络慢或接口响应长时。建议改用“请求完成后再延时发起下一次”的递归模式。
- 用 setTimeout 替代 setInterval，每次 fetch 完毕才设下一次
- 在 onBeforeUnmount 中 clearTimeout，同样需用 ref 保存 timeoutId
- 添加 loading 状态或节流判断，防止用户快速切换路由时反复启停
额外注意：跨组件/全局轮询的边界处理
如果未读消息需在多个页面共享（比如顶部导航栏），不要在每个组件里单独轮询。应抽到 pinia store 或 provide/inject 中统一管理，并监听路由变化——仅当用户停留在相关模块（如消息中心）或始终前台时才开启轮询。
- 使用 document.visibilityState 判断页面是否可见，隐藏时暂停轮询
- 配合 router.beforeEach 或 watch($route) 控制启停时机
- store 中的定时器也必须在 store 卸载（如 useStore() 的 onBeforeUnmount 场景）或应用级清理中销毁
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
