Vue自定义事件不负责检测网络状态，仅作为轻量通知通道转发已确认的连接变更；检测由WebSocket/Socket.IO/Axios等底层实现，通知通过Pinia或全局事件派发，组件按需响应。

Vue 自定义事件本身不直接处理网络断开与重连，它只是组件间通信的机制。真正负责检测和响应网络状态变化的是底层连接（如 WebSocket、Socket.IO 或 Axios 请求层），而自定义事件可作为通知分发的轻量通道，把已确认的状态变更广播给关心的组件。

关键在于：不要用自定义事件去“监听网络”，而是用它来“转发已确定的连接状态”。否则容易误判、重复触发或丢失上下文。

---

明确职责边界：谁检测？谁通知？

• 检测层（必须独立可靠）

  • WebSocket 实例的 connect / disconnect / reconnect_attempt 等原生事件
  • Socket.IO 的 connect、disconnect、connect_error
  • Axios 拦截器中判断 !error.response（无响应即疑似断网）
  • （辅助）navigator.onLine 仅作快速粗筛，不单独依赖

• 通知层（自定义事件可参与）

  立即学习“前端免费学习笔记（深入）”；

  • 在检测层确认状态后（例如 socket.on('disconnect') 触发时），由统一入口（如 Pinia store 或 App.vue）调用 $emit 或事件总线派发
  • 组件通过 @network-status 或 this.$on('network-status') 监听，响应 UI 更新或逻辑调整

---

推荐实现方式：Pinia + provide/inject + 自定义事件桥接

避免在每个组件里手动 $emit/$on，而是集中管理后再桥接：

• 在 Pinia store 中监听 socket 状态：

  

  Springboot Vue Builder

  从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

  下载

  // stores/socket.js
  export const useSocketStore = defineStore('socket', () => {
    const isConnected = ref(false)
    const reconnectCount = ref(0)
  
    // 假设 socket 已在 main.ts 初始化并注入
    const socket = inject('websocket')
  
    socket.on('open', () => {
      isConnected.value = true
      reconnectCount.value = 0
      // 向全局派发自定义事件（供 legacy 组件兼容）
      window.dispatchEvent(new CustomEvent('network-connected', { detail: { isConnected: true } }))
    })
  
    socket.on('close', () => {
      isConnected.value = false
      // 派发自定义事件
      window.dispatchEvent(new CustomEvent('network-disconnected', { detail: { reason: 'closed' } }))
    })
  })

• 在 App.vue 或根组件中注册全局监听（一次注册，全局限用）：

  <script setup>
  import { onMounted, onUnmounted } from 'vue'
  import { useSocketStore } from '@/stores/socket'
  
  const socketStore = useSocketStore()
  
  const handleNetworkChange = (e) => {
    if (e.type === 'network-disconnected') {
      // 可触发 Toast、显示离线 Banner 等
      console.log('网络已断开')
    }
  }
  
  onMounted(() => {
    window.addEventListener('network-disconnected', handleNetworkChange)
    window.addEventListener('network-connected', handleNetworkChange)
  })
  
  onUnmounted(() => {
    window.removeEventListener('network-disconnected', handleNetworkChange)
    window.removeEventListener('network-connected', handleNetworkChange)
  })
  </script>

• 业务组件中可选择性监听（非必须，推荐用 useSocketStore() 计算属性）：

  <template>
    <div v-if="!isConnected" class="offline-banner">⚠️ 网络已断开，正在重连...</div>
  </template>
  <script setup>
  import { useSocketStore } from '@/stores/socket'
  const { isConnected } = useSocketStore()
  </script>

---

为什么不建议直接用组件内 $emit 处理？

• ❌ this.$emit('network-down') 写在某个页面组件里 → 其他页面收不到
• ❌ 子组件 emit，父组件 v-on 监听 → 层级深时传递链断裂，且无法跨路由生效
• ❌ 频繁 emit（如每秒心跳）→ 事件风暴，性能浪费，难以节流去重
• ✅ 自定义事件适合「低频、明确语义、跨层级轻量通知」，比如用户登出、主题切换、权限变更——网络状态正属于这类

---

补充：兼容旧项目可用简易事件总线

若暂未升级 Pinia 或 Composition API，可用一个轻量事件中心：

// utils/eventBus.js
import { createApp } from 'vue'
const app = createApp({})
export const eventBus = app.config.globalProperties
// 或直接导出一个 EventEmitter 实例（需引入 events 包）

然后在检测处：

eventBus.$emit('network-status', { type: 'disconnected', timestamp: Date.now() })

组件中：

<script>
export default {
  mounted() {
    this.$eventBus.$on('network-status', this.handleNetworkStatus)
  },
  beforeUnmount() {
    this.$eventBus.$off('network-status', this.handleNetworkStatus)
  }
}
</script>

注意：Vue 3 中 $on/$off 已移除，需搭配 mitt 或 tiny-emitter 等第三方库使用。

---

不复杂但容易忽略：自定义事件是“信使”，不是“哨兵”。让它跑得准，前提是有人先看清风向。