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()。

Springboot Vue Builder

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

下载

解绑必须精确匹配：建议用函数引用而非匿名函数

匿名函数无法被正确移除，会导致残留监听：

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

• ❌ 错误写法（无法解绑）：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 应仅用于跨多层松耦合通信场景