vue 总线

1. vue2总线（ Event Bus）

用于组件通信， 灵活的机制，可用于实现组件间的跨级通信。通过在根实例中创建事件总线，我们可以在组件中自由地触发和监听事件，实现数据的传递和共享。

功能类似 【vue3的provide和inject】 或者 【js自定义事件】 或者 【状态管理库 vuex】

使用方法基本 = 【js自定义事件】

总结：一个轮子，而且性能不好，如果若团队熟悉vuex， 优先选择vuex

1.1 全局总线创建

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus = this;  // 创建事件总线
  }
}).$mount('#app')

1.2 A组件发送消息

<script>
// A组件
export default {
  data() {
    return {
      msg: ""
    }
  },
  methods: {
    sendData() {
      this.$bus.$emit('update', this.msg) // 发送消息
    }
  }
};
</script>

1.3 B组件接受消息

<script>
// B组件
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted(){
    // 监听，接收消息
    this.$bus.$on('update', mag => {
      this.message = mag;
    })
  },
  beforeDestroy() {
		this.$bus.$off('update')  // 销毁事件监听
	}
}
</script>

2. vue3 放弃总线

Vue 3的设计目标之一是提高性能和可维护性

所以vue3 放弃了总线的方式， 而是使用了provide和inject的方式

• 父组件通过provide提供数据
• 子组件通过inject注入数据

2.1 为什么

• 1、更好的组件通信方式
  • 【Provide/Inject】
• 2、易于调试和维护， 总线的问题
  • 难以追踪事件流：果没有正确地销毁事件监听器，全局事件总线可能导致内存泄漏
  • 潜在内存泄漏：在复杂的应用中，事件的来源和去向难以追踪，调试过程变得非常困难
  • 代码分离度降低：全局事件总线使得组件之间的耦合度增加，降低了代码的模块化和重用性
• 3、性能优化
  • 过多的事件监听：在大型应用中，如果有大量的事件监听器，可能会导致性能瓶颈
  • 事件传播的延迟：全局事件总线可能引起事件传播的延迟，影响应用的响应速度。
• 4、重复的轮子
  • 状态管理库（vuex 和 pinia等） 集中式的状态管理，使得多个组件可以共享状态，功能重复