Vue 全局事件总线：Vue 2 vs Vue 3 实现

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

• 🤖 洛可可白：个人主页

• 🔥 个人专栏：✅前端技术 ✅后端技术

• 🏠 个人博客：洛可可白博客

• 🐱 代码获取：bestwishes0203

• 📷 封面壁纸：洛可可白wallpaper

Vue 全局事件总线：Vue 2 vs Vue 3 实现

引言

在构建大型Vue应用时，跨组件通信是一个常见需求。Vue提供了多种通信方式，包括父子组件传参、兄弟组件通信、Vuex状态管理等。然而，对于简单的跨组件通信，全局事件总线（Event Bus）提供了一种轻量级的解决方案。本文将比较在Vue 2和Vue 3中实现全局事件总线的方法，并探讨各自的优缺点。

Vue 2 全局事件总线

在Vue 2中，全局事件总线通常通过创建一个新的Vue实例来实现，这个实例作为中央枢纽供所有组件使用。

实现步骤

1. 创建事件总线

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

2. 在组件中使用事件总线

<template>
  <button @click="emitEvent">发射事件</button>
</template>

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

export default {
  methods: {
    emitEvent() {
      EventBus.$emit('my-event', '这是来自组件A的消息');
    }
  }
}
</script>

<template>
  <div>
    <h2>事件消息：{{ message }}</h2>
  </div>
</template>

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

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('my-event', this.handleEvent);
  },
  methods: {
    handleEvent(msg) {
      this.message = msg;
    }
  },
  beforeDestroy() {
    EventBus.$off('my-event', this.handleEvent);
  }
}
</script>

Vue 3 全局事件总线

Vue 3引入了组合式API，提供了更多灵活性。我们可以利用这些新特性来实现全局事件总线。

实现步骤

1. 创建事件总线

// event-bus.js
import { reactive, readonly } from 'vue';

const state = reactive(new Map());

function emit(event, payload) {
  (state.get(event) || []).forEach((callback) => callback(payload));
}

function on(event, callback) {
  if (!state.has(event)) {
    state.set(event, []);
  }
  state.get(event).push(callback);
  return () => off(event, callback);
}

function off(event, callback) {
  const callbacks = state.get(event);
  if (callbacks) {
    callbacks.splice(callbacks.indexOf(callback), 1);
  }
}

export const EventBus = {
  emit,
  on,
  off,
  readonly: readonly(state),
};

2. 在组件中使用事件总线

<template>
  <button @click="emitEvent">发射事件</button>
</template>

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

const emitEvent = () => {
  EventBus.emit('my-event', '这是来自组件A的消息');
};
</script>

<template>
  <div>
    <h2>事件消息：{{ message }}</h2>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { EventBus } from './event-bus.js';

const message = ref('');

const listener = (msg) => {
  message.value = msg;
};

EventBus.on('my-event', listener);

onUnmounted(() => {
  EventBus.off('my-event', listener);
});
</script>

比较与结论

Vue 2 事件总线

• 优点：简单易用，不需要额外的库或工具。
• 缺点：随着应用规模的增长，事件总线可能会变得难以维护，且不易于跟踪事件的来源和去向。

Vue 3 事件总线

• 优点：利用组合式API，代码更加模块化，易于维护。响应式的状态管理使得事件监听和发射更加灵活。
• 缺点：需要对组合式API有一定的了解，对于初学者来说可能有一定的学习曲线。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀