Vue组件挂载时如何触发window online事件检测初始网络状态

你当前的实现存在几个明显问题，导致拿不到初始在线状态：

• 初始状态硬编码为false，没有在组件加载阶段读取浏览器原生的网络状态接口赋值
• 重复绑定事件：watchEffect和onMounted中各绑定了一次online/offline监听器，触发时会重复执行回调
• 事件回调仅打印日志，没有同步更新isOnline响应式变量
• 没有做事件监听清理，组件卸载后会残留监听器造成内存泄漏
• 错误使用watchEffect：这里没有需要追踪的响应式依赖，放在watchEffect里绑定事件没有实际意义，反而会因为缺少清理逻辑重复绑定监听器

浏览器原生提供了同步接口navigator.onLine，调用后会立刻返回当前设备的网络连接状态，不需要等待事件触发，直接在初始化阶段读取就能拿到挂载时的在线状态。
完整可运行代码如下：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 初始化时直接读取当前网络状态作为默认值
const isOnline = ref(navigator.onLine);

const updateOnlineStatus = () => {
  isOnline.value = navigator.onLine;
  // 此处可添加网络状态变更后的自定义逻辑
};

onMounted(() => {
  // 挂载时二次同步状态，覆盖初始化到挂载完成间隙的状态变更（可选，鲁棒性更强）
  isOnline.value = navigator.onLine;
  window.addEventListener('online', updateOnlineStatus);
  window.addEventListener('offline', updateOnlineStatus);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听，避免内存泄漏
  window.removeEventListener('online', updateOnlineStatus);
  window.removeEventListener('offline', updateOnlineStatus);
});
</script>

• 后续所有业务逻辑（发起API请求、读取localStorage缓存等）直接读取isOnline.value即可判断当前网络状态，不需要额外等待
• 如果你需要在组件挂载前的更早阶段（比如路由守卫、全局状态初始化）判断网络状态，直接同步调用navigator.onLine即可，该接口在浏览器环境全局可用，无异步等待成本
• 注意：navigator.onLine仅能判断设备是否连接到局域网/蜂窝网络，无法100%确认可访问公网，如果需要精准判断公网连通性，可以在状态为在线时额外发起一个轻量HEAD请求做探活，绝大多数业务场景下原生接口的精度足够使用

内容的提问来源于stack exchange，提问作者Bryan88