用自定义组合式函数useeventbus替代全局事件总线，通过map存储事件监听器、自动绑定组件卸载钩子、泛型约束类型，实现生命周期可控、类型安全、无全局污染的事件通信。
用自定义组合式函数替代全局事件总线，核心是把“事件注册—分发—清理”逻辑封装成可复用、生命周期可控、类型安全的逻辑单元，避免全局污染和内存泄漏。它不是简单换个写法，而是从设计源头切断组件对全局状态的隐式依赖。
组合式函数封装事件通信逻辑
创建一个 useEventBus 函数，内部维护私有事件映射表，不暴露全局实例：
- 用
Map<string set>></string>存储事件名与监听器集合，天然隔离作用域 - 监听器注册时自动绑定当前组件的
onUnmounted（Vue 3）或useEffect cleanup（React），确保组件卸载时自动移除 - 支持 TypeScript 泛型，为每个事件名定义
detail类型，如useEventBus()
通信过程完全受控于调用方
事件的触发与监听都发生在组件 setup 或 effect 内部，不依赖跨模块引用：
- 发送端：调用
bus.emit('data-updated', payload)，仅影响已注册的监听器 - 接收端：在
setup()中调用bus.on('data-updated', handler)，handler 自动随组件销毁而解绑 - 无全局命名冲突风险——不同模块可各自调用
useEventBus()创建独立实例
天然规避事件总线典型问题
传统 EventBus（如 Vue 2 的全局 Vue 实例）容易引发的问题，在组合式函数中被结构化解决：
-
内存泄漏：监听器自动清理，无需手动
$off或beforeDestroy配置 - 事件名污染：事件名只在函数调用范围内有效，不进入全局命名空间
-
类型不可靠：泛型约束使
emit和on的数据结构强一致，编辑器可提示、编译期报错 -
调试困难：每个 bus 实例可命名（如
const formBus = useEventBus()），便于 DevTools 追踪来源
适用边界清晰，不越界
这种方案适合中低复杂度场景，比如表单联动、主题切换、局部状态广播等：
- 组件间存在明确协作关系，但嵌套层级深或非父子关系
- 不需要跨 iframe、跨 Shadow DOM 或服务端同步
- 不需事件重放、拦截中间件、异步队列等高级能力（这些应交由 Pinia / Zustand 等状态库处理）
