如何用发布订阅模式解决跨组件通信中的强耦合问题-js教程-PHP中文网

发布订阅模式通过事件总线将强耦合降为对总线的弱依赖，但需规范事件名、可控生命周期、避免滥用；props/$emit在深层或跨级组件通信时导致中转污染与父组件职责膨胀，易引发生命周期错位和调用链断裂。

如何用发布订阅模式解决跨组件通信中的强耦合问题

发布订阅模式不能彻底消除耦合，但能将强耦合降级为对事件总线的弱依赖——前提是事件名规范、生命周期可控、不滥用全局事件。

为什么直接 `$emit` / `props` 会引发强耦合

父子组件用 props 和 $emit 看似简洁，但一旦组件层级变深（比如 A → B → C → D），D 要通知 A 就得层层透传，B 和 C 被迫成为“中转站”，逻辑污染严重；更麻烦的是，如果 A 和 D 根本不相邻（如兄弟组件、跨路由组件），就得靠父组件做中介，父组件迅速膨胀成“事件调度中心”，职责失焦。

常见错误现象：TypeError: this.$parent.$emit is not a function、Event not received after component unmounted，本质都是耦合导致生命周期错位或调用链断裂。

手写一个轻量 `EventBus` 的关键约束

不用第三方库也能快速落地，但必须守住三条线：事件命名空间化、监听器自动清理、禁止匿名回调。

事件名必须带作用域前缀，例如 "user:login-success" 而非 "login"，避免冲突
所有 on 必须绑定到组件实例上（如 this.bus = new EventBus()），并在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）里调用 offAll，否则内存泄漏
不能这样写：bus.on('data', () => { ... })；必须存引用：this.handler = (v) => {...}; bus.on('data', this.handler)，否则无法精准移除

示例（Vue 3 setup）：

const bus = new EventBus()
onMounted(() => {
  bus.on('order:created', handleOrderCreated)
})
onBeforeUnmount(() => {
  bus.off('order:created', handleOrderCreated)
})

`mitt` 比原生 `EventBus` 多解决了什么

mitt 是最常用的轻量替代方案（仅 200B），它默认支持通配符 * 和异步事件，但更重要的是——它不依赖 this 上下文，天然适配 Composition API。

通配符可用于调试：mitt.on('*', (type, detail) => console.log(type, detail))
不支持自动清理，仍需手动 off；但提供 all.clear() 一键清空（慎用，可能误杀其他模块监听）
与 Vue Router 导航守卫配合时更稳：在 beforeEach 中发事件，mitt 不会因组件未挂载而丢事件（原生 EventBus 若监听器未就绪就发事件，会静默失败）

注意兼容性：mitt 不支持 IE，若需兼容请用 tiny-emitter 或自行 polyfill。