vue 3 中不能用 watch 直接监听 navigator.online，因其是非响应式布尔值；正确做法是用 ref 创建响应式 isonline，并通过 window 的 online/offline 事件手动更新，再 watch 该 ref。
Vue 3 中不能用 watch 直接监听网络状态，因为 navigator.onLine 是一个普通布尔值，不是响应式数据——它不会自动触发 Vue 的依赖追踪，watch 对它完全无效。
为什么 watch(navigator.onLine, ...) 不行
navigator.onLine 是浏览器原生属性，读取时返回 true 或 false，但它本身不具有响应式能力。把它传给 watch 就像写 watch(123, ...) 或 watch('hello', ...)，根本不会建立任何响应式连接，变化时自然毫无反应。
正确做法：用 window 事件 + 响应式 ref 管理状态
核心思路是：用 ref 创建一个响应式变量（如 isOnline）来代表当前网络状态，再通过原生 online/offline 事件手动更新它。之后你就可以用 watch 安全监听这个 ref 了。
- 在
setup中定义const isOnline = ref(navigator.onLine) - 用
window.addEventListener('online', () => isOnline.value = true) - 用
window.addEventListener('offline', () => isOnline.value = false) - 在组件卸载前移除监听（或用
onUnmounted自动清理）
监听并弹出提示横幅的完整示例
以下代码在状态变化时调用 showToast 函数（可用你喜欢的 UI 库如 Element Plus、Naive UI 的通知组件，或简单用 alert 演示）：
import { ref, watch, onUnmounted } from 'vue'
export default {
setup() {
const isOnline = ref(navigator.onLine)
const handleOnline = () => { isOnline.value = true }
const handleOffline = () => { isOnline.value = false }
window.addEventListener('online', handleOnline)
window.addEventListener('offline', handleOffline)
// 清理事件监听器
onUnmounted(() => {
window.removeEventListener('online', handleOnline)
window.removeEventListener('offline', handleOffline)
})
// ✅ 现在可以安全 watch 这个 ref
watch(isOnline, (newVal) => {
if (newVal) {
showToast('网络已恢复，操作继续')
} else {
showToast('网络已断开，请检查连接')
}
})
function showToast(msg) {
// 示例：使用浏览器原生提示（实际项目建议用 Toast 组件）
console.log(msg)
// ElMessage({ message: msg, type: newVal ? 'success' : 'warning' })
}
return { isOnline }
}
}
更简洁方案：用 VueUse 的 useOnline
如果你已在项目中引入 @vueuse/core，直接用 useOnline()——它内部已封装好事件监听和响应式 ref，开箱即用：
import { useOnline } from '@vueuse/core'
import { watch } from 'vue'
const isOnline = useOnline()
watch(isOnline, (newVal) => {
if (newVal) showToast('网络已恢复')
else showToast('网络已断开')
})
它还自带自动清理、SSR 兼容等特性，比手写更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
