Vue 3组合式函数通过ref封装navigator.onLine初始值并监听online/offline事件实现网络状态实时检测，配合onMounted注册、onUnmounted清理，返回响应式isOnline及checkNow方法，还可集成至Axios拦截器提前阻断请求。
Vue 3 组合式函数处理网络状态的实时检测，核心是把 navigator.onLine 的初始值 + window 的 online/offline 事件封装成一个响应式、可复用的逻辑单元，同时兼顾清理和类型安全。
用 ref 管理在线状态
直接读取 navigator.onLine 获取初始值，并用 ref 包裹，使其具备响应式能力：
-
const isOnline = ref(navigator.onLine)—— 页面加载时就拿到真实状态，避免首次渲染为undefined或默认true - 不推荐用
reactive({ isOnline: navigator.onLine })，因为后续赋值需解构再改，不如ref直观
监听 online/offline 事件并自动更新
在组合式函数内部注册事件监听器，响应式地同步状态变化：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 使用
onMounted确保 DOM 已挂载后再添加监听（避免 SSR 场景报错） - 监听
online时设isOnline.value = true，监听offline时设isOnline.value = false - 必须在
onUnmounted中移除监听，防止内存泄漏（尤其在路由切换频繁的应用中）
返回响应式状态与工具方法
组合式函数应暴露清晰的接口，便于组件消费：
- 直接返回
{ isOnline }，模板中可直接v-if="isOnline" - 可额外提供
checkNow()方法，供手动触发一次重检（比如用户点击“重试”时） - 如需支持 TypeScript，返回类型可标注为
{ isOnline: Ref，增强 IDE 提示和类型校验}
配合请求拦截器提前拦截断网请求
仅 UI 响应不够，还要阻止无效请求发出：
- 在 Axios 请求拦截器中加入判断：
if (!isOnline.value) return Promise.reject(new Error('网络已断开')) - 这样比等请求超时更快反馈，用户体验更及时
- 注意：该判断需确保
isOnline是当前最新值（组合式函数返回的 ref 是实时的）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
