Vue2 和 Vue3中EventBus使用差异

前言

在前端开发中，组件之间的通信是一个非常重要的话题。Vue.js 提供了多种方式来实现这一点，本文将重点介绍在 Vue 2 中使用 EventBus 和在 Vue 3 中使用 mitt 来实现组件间通信的方式。

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

一、EventBus 和 mitt 的对比

特性	Vue 2 EventBus	Vue 3 mitt
实现方式	Vue 实例	第三方库 mitt
使用复杂度	简单	简单
性能	较好	更好
内存管理	需要手动管理事件监听	提供 all.clear() 清除所有监听器
API 简洁性	较多 API	更简洁的 API
全局性	全局 Vue 实例，容易混乱	mitt 实例，可多实例管理

---

二、Vue 2 中的 EventBus 使用实例

在 Vue 2 中，EventBus 是一种常见的非父子组件之间的通信方式。EventBus 本质上是一个空的 Vue 实例，通过它可以在不同组件之间传递事件和数据。

EventBus 的API

• $emit(eventName, [...args]): 触发一个事件，附带参数。
• $on(eventName, callback): 监听一个事件，当事件触发时执行回调。
• $off(eventName, callback): 移除事件监听。

eventBus 可以通过使用特殊的事件名 "*" 来监听所有事件。这通常在调试或需要全局监听所有事件的情况下使用

2.1 创建 EventBus

首先，我们需要创建一个 EventBus 实例，通常我们会在一个独立的文件中创建它：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

2.2 在组件中使用 EventBus

2.2.1 组件 A - 发送事件

// ComponentA.vue
<template>
  <button @click="sendEvent">发送事件</button>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendEvent() {
      EventBus.$emit('updateMessage', '组件A的消息。。。123');
    }
  }
}
</script>

2.2.2 组件 B - 监听事件

// ComponentB.vue
<template>
  <div>接收到的消息: {{ message }}</div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('updateMessage', (data) => {
      this.message = data;
    });
    /* 监听所有事件 */
    // EventBus.$on('*', ()=>{.....});
  },
  /* 组件卸载时记得释放内存  */
  beforeDestroy() {
    EventBus.$off('updateMessage');
    // 取消所有事件
    // EventBus.$off('*', ()=>{.....});
  }
}
</script>

2.3 注意事项

• 内存泄漏：在组件销毁时需要手动移除事件监听。
• 全局性：EventBus 是全局的，这意味着在大型应用中可能会导致事件管理混乱。

---

三、Vue 3 中的 mitt 使用实例

Vue 3 中不再推荐使用 Vue 实例作为 EventBus，而是建议使用第三方库 mitt 来进行事件总线管理。mitt 是一个轻量级的事件库，体积小、性能高。

mitt 的 API介绍：

• emit(type, event): 触发一个事件，传递数据。
• on(type, handler): 监听一个事件。
• off(type, handler): 移除事件监听。
• all.clear(): 清除所有事件监听器。

3.1 安装 mitt

首先需要安装 mitt：

npm install mitt

3.2 创建 mitt 实例

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();

typescript 类型设置

// eventBus.ts
import mitt from 'mitt'

type Event = {
  // 用于Message 更新通知
  updateMessage: any
}

const emitter = mitt<Event>()
export default emitter

3.3 在组件中使用 mitt

3.3.1 组件 A - 发送事件

// ComponentA.vue
<template>
  <button @click="sendEvent">发送事件</button>
</template>

<script>
import { emitter } from './eventBus';

export default {
  methods: {
    sendEvent() {
      emitter.emit('updateMessage', '组件A的消息。。。123');
    }
  }
}
</script>

3.3.2 组件 B - 监听事件

// ComponentB.vue
<template>
  <div>接收到的消息: {{ message }}</div>
</template>

<script>
import { emitter } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    /* 监听具体事件 */
    emitter.on('updateMessage', (data) => {
      this.message = data;
    });
    /* 监听所有的事件 */
    emitter.on('*', (data) => {
      this.message = data;
    });

  },
  beforeUnmount() {
    emitter.off('updateMessage');
    /* 取消所有事件 */
    //emitter.all.clear()
  }
}
</script>

3.4 mitt 的优点

• 轻量级：mitt 是一个小型库，适合在大型项目中使用。
• 简洁 API：API 简洁明了，易于使用。
• 无依赖：mitt 不依赖 Vue，可以在任意 JavaScript 项目中使用。

---

四、总结

在 Vue 2 中，使用 EventBus 是一种方便的方式来实现非父子组件之间的通信，但需要注意内存管理问题。在 Vue 3 中，推荐使用 mitt，它提供了更轻量级、性能更高的解决方案，并且 API 更加简洁易用。