用 watcheffect 同步网络提示需将 navigator.online 封装为响应式 ref，通过事件监听更新其值；watcheffect 读取该 ref 并在状态变化时弹出对应通知，利用 oninvalidate 清理旧提示，结合时间戳防重复、可见性判断和通知堆叠限制优化体验。
用 watchEffect 同步网络断开与重连提示，关键在于把 navigator.onLine 封装为响应式状态，并让它驱动通知逻辑的自动触发与清理，而不是靠事件监听器手动更新。
把网络状态转为响应式 ref
原生 navigator.onLine 不是响应式数据，不能直接被 watchEffect 追踪。需用 ref 包裹并同步更新：
- 定义
isOnline = ref(navigator.onLine) - 在
window.addEventListener('online')和'offline'回调中更新该 ref，确保状态实时准确 - 避免在
watchEffect内部重复监听事件——只负责响应，不负责采集
用 watchEffect 驱动通知的显示与关闭
watchEffect 会自动读取 isOnline.value 并在其变化时执行副作用。适合封装「状态变 → 弹提示 → 自动关」流程：
- 当
isOnline.value === false，调用通知函数弹出「网络已断开」警告 - 当
isOnline.value === true，弹出「已恢复网络」成功提示 - 利用
onInvalidate清理上一次未关闭的通知（例如调用message.close()），防止旧提示残留
防重复与体验优化
同一状态反复切换可能触发多次通知，影响体验。可在逻辑中加入控制：
- 用额外 ref 记录最近一次通知的时间戳，两次提示间隔小于 2 秒则跳过
- 离线提示中内置「重试」按钮，点击后主动触发一次接口或刷新页面
- 通知组件自身支持堆叠限制（如最多同时显示 1 条）和自动关闭（5 秒后消失）
结合页面可见性避免干扰
用户切到其他标签页时，即使网络变化也不应弹窗打扰：
- 监听
document.visibilityState，同样用 ref 封装为isVisible - 在
watchEffect中同时依赖isOnline和isVisible - 仅当
isOnline.value !== prevValue && isVisible.value时才触发通知
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
