Vue 3 中网络状态检测应封装为可复用 Composable：useNetworkStatus 提供响应式 isOnline 并自动清理事件；useNetworkInfo 补充 effectiveType 等细粒度信息并降级兼容；useOfflineGuard 主动拦截请求并支持离线重试；各模块需协同响应网络变化。

Vue 3 中处理网络连接状态检测的逻辑抽象，核心是把“监听 online/offline 事件 + 读取 navigator.connection + 响应式同步状态”这一整套行为封装成可复用的 Composable，而不是在每个组件里重复写 event listener 或手动维护 isOnline/refetching 等状态。

useNetworkStatus：基础在线/离线感知

这是最轻量、兼容性最好的一层。利用 navigator.onLine 和原生事件，返回响应式布尔值：

• 在 setup 中调用 const { isOnline } = useNetworkStatus()，直接用于条件渲染或拦截逻辑
• 内部自动注册 online/offline 监听器，并在组件卸载时清理，避免内存泄漏
• 初始值取自 navigator.onLine，避免首次渲染出现“假离线”

useNetworkInfo：增强型网络画像获取

当需要区分 Wi-Fi、4G、slow-2g 等场景时，用它补充更细粒度信息（需检查 'connection' in navigator）：

Element Plus UI Vue3

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

下载

• 返回 effectiveType（如 '4g'）、downlink（估算带宽）、rtt（延迟）、saveData（是否开启省流模式）
• 对不支持 Network Information API 的浏览器（如旧版 Safari、IE）做降级处理，只保留 isOnline 字段
• 配合 watch 可动态调整策略：比如弱网下自动关闭图片懒加载、降级图表渲染精度

useOfflineGuard：结合请求拦截的主动防护

单纯知道“离线”还不够，关键是要让业务逻辑及时响应。这个 Composable 主动介入请求链路：

• 暴露 isOfflineRef，供 axios 请求拦截器读取；若为 true，则直接 Promise.reject 并提示“网络已断开”
• 提供 retryWhenOnline(fn) 工具函数：把一个异步操作包装成“等网络恢复后自动重试”，适合提交表单、同步草稿等场景
• 内部监听 online 事件，触发所有挂起的重试队列

与全局状态和 WebSocket 协同工作

网络状态不是孤立的，它直接影响其他核心模块的行为：

• WebSocket 连接管理器（如 WSConnection）应订阅 isOnline，离线时不盲目重连，恢复后才启动指数退避流程
• 用户登录状态 Store（如 Pinia 的 useUserStore）可在 isOnline 变为 false 时暂停轮询会话接口，避免无效请求
• 页面级 loading 状态可结合 effectiveType：Wi-Fi 下隐藏加载动画，slow-2g 下显示“加载中…（网络较慢）”提示

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！