Vue 自定义事件怎么处理网络断开与重连的事件派发-Vue.js-PHP中文网

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

vue 自定义事件怎么处理网络断开与重连的事件派发

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 状态：

// 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 或根组件中注册全局监听（一次注册，全局限用）：

Springboot Vue Builder

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

下载

<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 等第三方库使用。

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