Vue 的 watch 可监听 unreadCount 变化并触发 favicon 角标更新和桌面通知，需结合 canvas 绘制、Notification API 及 WebSocket/SSE 确保状态同步。
Vue.js 中的 watch 可以监听数据变化并触发响应逻辑，但直接用它更新系统通知角标（如浏览器右上角 favicon 上的小红点、桌面通知未读数）需要结合浏览器 API 和业务状态设计，不能仅靠监听就自动“显示角标”——角标是 UI 层表现，需主动调用更新逻辑。
监听关键未读状态字段
系统通知角标通常反映“未读消息总数”或“某类通知未处理数”，应将该数值作为响应式数据（如 unreadCount）定义在 data 或 ref 中，再用 watch 监听其变化：
- 若使用 Options API：在
watch选项中监听unreadCount，触发角标更新函数 - 若使用 Composition API：用
watch()函数监听unreadCountRef，避免监听深层嵌套对象导致漏触发 - 注意开启
immediate: true，确保组件初始化时也执行一次角标同步（比如页面刷新后从接口拉取了 unreadCount，但 watch 默认不触发）
更新 favicon 角标需手动绘制 canvas
浏览器不提供原生“设置 favicon 角标” API，实际做法是：动态生成带数字的 canvas 图像，转为 blob URL 后替换 <link rel="icon"> 的 href：
- 准备一个 16×16 或 32×32 的 canvas，用
fillText绘制数字，背景透明或匹配主题色 - 生成 blob URL：
URL.createObjectURL(canvas.toBlob(...))，再赋值给document.querySelector('link[rel="icon"]').href - 数字 ≥10 时建议省略为 “9+”，避免空间不足；为 0 时恢复原始 favicon 链接
配合 Notification API 实现桌面提醒
仅更新角标不够，用户可能需要强感知。当新通知到达且用户未聚焦页面时，可调用 Notification.requestPermission() 后发送桌面通知：
立即学习“前端免费学习笔记（深入）”；
- 在
watch回调中判断document.hidden === true且权限已授予，再调用new Notification(...) - 避免重复弹窗：可用
Set缓存已推送的 notificationId，或限制每分钟最多 1 条 - 点击通知跳转对应页面：
notification.onclick = () => window.focus(); router.push('/notify')
服务端推送与前端状态对齐
角标不准常因前后端状态不同步。watch 只是响应层，真正源头应是可靠的数据通道：
- 优先使用 WebSocket 或 Server-Sent Events（SSE）接收实时通知增量，更新
unreadCount，watch 自然触发 - 若仅依赖轮询，需控制频率（如 30s 一次），并在响应成功后才更新本地 count，防止网络抖动误增
- 退出登录或切换账号时，务必重置
unreadCount并清空 favicon，避免残留角标
不复杂但容易忽略的是：角标本质是“用户未处理状态”的视觉映射，watch 是桥梁，不是源头。把数据流理清——服务端发 → 前端收 → 状态更新 → watch 响应 → UI 更新（favicon / badge / DOM）——整条链路稳了，角标才准。
