Vue 2中全局事件总线需在created/mounted绑定、beforeDestroy解绑，禁用匿名函数，推荐mixin封装或改用provide/inject、Pinia等现代方案。
在 Vue 2 中使用全局事件总线（Event Bus）时，绑定事件必须配对解绑，否则会导致内存泄漏和重复触发。核心原则是：在哪绑定，就在哪解绑；组件销毁前必须清理。
推荐做法：在 created / mounted 中绑定，在 beforeDestroy 中解绑
这是最清晰、最不容易出错的时机组合：
- created：此时组件实例已创建，data、methods 已初始化，适合绑定事件（比 mounted 更早，无需等待 DOM）
- mounted：如果事件处理依赖 DOM（如调用 ref 或操作元素），可放在这里绑定
- beforeDestroy（Vue 2）：组件卸载前的最后一个可靠钩子，确保所有监听被清除
避免在 mounted 绑定 + destroyed 解绑的陷阱
Vue 2 的 destroyed 钩子执行时，组件实例已解构，this.$bus 可能为 null 或不可靠；且该钩子不保证在所有子组件销毁后执行，存在竞态风险。务必使用 beforeDestroy —— 它在实例仍完整、响应式系统尚可用时触发，能安全调用 this.$bus.off()。
解绑必须精确匹配：建议用函数引用而非匿名函数
匿名函数无法被正确移除，会导致残留监听：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法（无法解绑）：
this.$bus.on('msg', () => { ... }) - ✅ 正确写法（保留引用）：
created() {<br> this.handleMsg = (data) => { /* 处理逻辑 */ };<br> this.$bus.on('msg', this.handleMsg);<br> }<br> beforeDestroy() {<br> this.$bus.off('msg', this.handleMsg);<br> }
进阶建议：封装成 mixin 或 Composition API 兼容方案
为避免每个组件重复写绑定/解绑逻辑，可抽象为可复用逻辑：
- Vue 2 mixin 示例：提供
onGlobalEvent(event, handler)方法，内部自动注册并收集，beforeDestroy统一清理 - Vue 3 + setup：虽不再推荐 Event Bus，但若需兼容旧逻辑，可在
onBeforeUnmount中调用bus.off()，handler 同样需保留函数引用 - 更现代替代：优先考虑 provide/inject、Pinia store 或 emits + v-model，Event Bus 应仅用于跨多层松耦合通信场景
