Vue2 和 Vue3中EventBus使用差异

news2024/12/28 8:43:36

- 前言
- 一、EventBus 和 mitt 的对比
- 二、Vue 2 中的 EventBus 使用实例
- - 2.1 创建 EventBus
  - 2.2 在组件中使用 EventBus
  - - 2.2.1 组件 A - 发送事件
    - 2.2.2 组件 B - 监听事件
  - 2.3 注意事项
- 三、Vue 3 中的 mitt 使用实例
- - 3.1 安装 mitt
  - 3.2 创建 mitt 实例
  - 3.3 在组件中使用 mitt
  - - 3.3.1 组件 A - 发送事件
    - 3.3.2 组件 B - 监听事件
  - 3.4 mitt 的优点
- 四、总结

前言

在前端开发中，组件之间的通信是一个非常重要的话题。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>