useUnreadPolling 封装定时拉取、状态管理与生命周期清理，支持自动启停、可见性感知、错误重试及请求节流，避免内存泄漏与状态错乱。

用 Composition API 处理未读消息轮询，核心是把“定时拉取 + 状态管理 + 生命周期清理”封装成可复用、易维护的逻辑，避免手动管理定时器 ID 或忘记卸载导致内存泄漏。

封装一个 useUnreadPolling 组合函数

不建议在每个组件里重复写 setInterval 或 setTimeout。推荐抽离为 useUnreadPolling，专注未读数场景的特点：需自动启动、支持暂停/恢复、响应页面可见性、错误时降级重试。

• 内部用 useIntervalFn（来自 @vueuse/core）或自定义 setTimeout 递归，避免请求堆积
• 默认只在页面可见时轮询（结合 useDocumentVisibility）
• 返回 unreadCount、loading、error、refresh 和 pause/resume
• 自动在组件卸载时停止轮询

处理轮询中的请求重叠与节流

未读消息接口通常轻量但高频，若上一次请求未完成就触发下一次，可能造成状态错乱或重复通知。关键做法：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 不用 setInterval 直接调用请求函数，改用 setTimeout 递归：等请求结束再设下一次定时器
• 加 loading 状态锁：请求中时跳过本次轮询，防止并发
• 示例逻辑：if (!loading.value) { await fetchUnread(); setTimeout(poll, interval); }

适配页面可见性与用户交互

用户切到其他标签页时，继续轮询既浪费资源又可能被浏览器限频。应主动感知可见性：

立即学习“前端免费学习笔记（深入）”；

• 引入 @vueuse/core 的 useDocumentVisibility
• 当 documentVisibility.value === 'visible' 才执行请求；否则跳过并延后
• 用户切回页面时可立即触发一次刷新（visibilitychange 事件监听）
• 登录态失效或 401 响应时，自动 stop 并提示重新登录

与业务状态联动，避免无效轮询

未读消息轮询不是无条件运行的，要尊重用户当前行为：

• 进入消息列表页时才开启轮询；离开时暂停（可用 onBeforeRouteLeave 或 watch 路由）
• 用户点击“全部已读”后，可临时 pause，等服务端返回成功后再 resume
• 后台有新消息时，除了更新数字，还可触发桌面通知或声音提醒（需权限校验）
• 首次加载时用 fetchUnread 同步获取，轮询仅用于后续增量更新