结合 Vue 项目实现事件总线 Event Bug - 前端面试题

事件总线是一种模式，可以通过一个中央通道分发事件，让不同的系统部分实现解耦。在Vue.js中，事件总线通常是通过一个空的Vue实例来实现的。

以下是我如何在Vue项目中实现一个事件总线，以及我可能会用到它的一个场景：

实现事件总线

创建事件总线：

javascript
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

在组件中使用事件总线：

发射事件:

javascript
// ComponentA.vue
<template>
  <!-- 组件模板 -->
</template>

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    someMethod() {
      EventBus.$emit('my-event', { someData: 'Some data to send' });
    }
  }
}
</script>

监听事件:

javascript
// ComponentB.vue
<template>
  <!-- 组件模板 -->
</template>

<script>
import { EventBus } from './event-bus.js';

export default {
  mounted() {
    EventBus.$on('my-event', this.handleMyEvent);
  },
  beforeDestroy() {
    EventBus.$off('my-event', this.handleMyEvent);
  },
  methods: {
    handleMyEvent(payload) {
      console.log('Event received', payload);
      // 处理事件
    }
  }
}
</script>

在这个例子中，ComponentA 发射了一个事件 my-event，并传递了一些数据。ComponentB 监听这个事件，并定义了一个方法 handleMyEvent 来处理接收到的事件。

例子：事件总线的使用场景

假设我们有一个应用，其中有一个组件负责用户的认证（例如登录状态的显示），而另一个组件是一个模态框，用于登录。这两个组件位于不同的层级，也可能不直接相关。

我们不希望在每个需要知道登录状态的组件中都直接与模态框组件通信，因为这会导致高耦合和难以维护的代码。

在这种情况下，事件总线就派上了用场：

当用户在模态框中登录成功后，模态框组件可以发射一个事件，比如 login-success。
认证组件可以监听 login-success 事件，并据此更新用户的显示状态。

这样，我们就可以保持组件间的解耦，同时使它们能够有效地沟通。

注意事项

Vue 2.x中支持使用 $on, $emit, 和 $off 这样的实例方法来实现事件总线。然而，在Vue 3.x中，这种模式已经不再推荐，因为它违背了Vue 3推崇的Composition API的设计原则。在Vue 3中，推荐使用 provide/inject、Vuex或者Vue Composition API中的 reactive、ref以及 watchEffect来在组件间共享状态。