发布于 由admin

如何在 Vue 应用中实现一个全局的事件总线，用于跨组件的轻量级通信？

各位靓仔靓女，晚上好！我是你们的老朋友，今晚咱们一起聊聊Vue应用里的“信鸽”——全局事件总线。

在Vue的世界里，组件就像一个个独立的王国，各自为政，有自己的数据和逻辑。但有时候，这些王国之间需要传递一些信息，比如，一个组件发生了什么事，需要通知其他组件。这个时候，就需要一个“信鸽”来穿梭于各个王国之间，这就是事件总线的作用。

一、为什么要用事件总线？

先别急着撸代码，咱们先聊聊为什么要用这玩意。

  • 跨组件通信： 兄弟组件、隔代组件，甚至完全不相关的组件，都能通过事件总线进行通信。
  • 解耦： 组件之间不需要直接知道对方的存在，只需要知道事件总线就行了。这就像明星和粉丝的关系，明星不需要知道每一个粉丝是谁，只需要知道自己的官方账号就行了，粉丝通过官方账号就能了解明星的动态。
  • 轻量级： 对于简单的通信场景，事件总线比Vuex更轻量级，更易于使用。

二、事件总线的实现方式

实现事件总线的方式有很多种，咱们这里介绍两种比较常见的：

  1. Vue实例作为事件总线

    这是最简单粗暴的方式，直接创建一个Vue实例，然后把它挂载到全局，让所有组件都能访问到。

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

    使用方式：

    // ComponentA.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

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

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', '我是ComponentA发来的消息');
    }
  }
};
</script>
    // ComponentB.vue
<template>
  <div>接收到的消息：{{ message }}</div>
</template>

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

export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    // 别忘了移除监听，防止内存泄漏
    EventBus.$off('message');
  }
};
</script>

    代码解释：

    • EventBus.$emit('message', '我是ComponentA发来的消息'); ： ComponentA通过 $emit 方法触发一个名为 ‘message’ 的事件，并传递一个参数 ‘我是ComponentA发来的消息’。
    • EventBus.$on('message', (msg) => { this.message = msg; }); ： ComponentB通过 $on 方法监听 ‘message’ 事件，当事件被触发时，执行回调函数，将接收到的消息赋值给 this.message。
    • EventBus.$off('message'); ： ComponentB在组件销毁前，通过 $off 方法移除对 ‘message’ 事件的监听，防止内存泄漏。

  2. Provide/Inject

    这种方式更加优雅，通过 provide 和 inject 将事件总线传递给子组件。

    // App.vue (或者 main.js)
import Vue from 'vue';
import EventBus from './event-bus.js';

new Vue({
  el: '#app',
  provide: {
    EventBus: EventBus
  },
  // ...
});

    使用方式：

    // ComponentA.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { inject } from 'vue';

export default {
  inject: ['EventBus'],
  methods: {
    sendMessage() {
      this.EventBus.$emit('message', '我是ComponentA发来的消息');
    }
  }
};
</script>
    // ComponentB.vue
<template>
  <div>接收到的消息：{{ message }}</div>
</template>

<script>
import { inject } from 'vue';

export default {
  inject: ['EventBus'],
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.EventBus.$on('message', (msg) => {
      this.message = msg;
    });
  },
  beforeDestroy() {
    this.EventBus.$off('message');
  }
};
</script>

    代码解释：

    • provide: { EventBus: EventBus } ： 在根组件（通常是 App.vue 或 main.js 中创建的 Vue 实例）中，通过 provide 选项将 EventBus 对象提供给所有子组件。
    • inject: ['EventBus'] ： 在需要使用 EventBus 的组件中，通过 inject 选项声明需要注入的 EventBus 对象。Vue 会自动从父组件的 provide 中找到对应的对象，并将其注入到当前组件中。
    • 后续的使用方式与第一种方法相同，通过 this.EventBus.$emit 触发事件，通过 this.EventBus.$on 监听事件，并通过 this.EventBus.$off 移除事件监听。

三、事件总线的优缺点

特性 优点 缺点
优点 1. 简单易用： 实现和使用都非常简单，几行代码就能搞定。 2. 解耦性好： 组件之间不需要直接依赖，只需要依赖事件总线。 3. 灵活性高： 可以根据需要自定义事件名称和参数。 4. 轻量级： 相比Vuex，更加轻量级，适用于简单的通信场景。 5. 快速原型开发： 在项目初期，可以使用事件总线快速搭建原型，验证想法。 1. 可维护性差： 当项目变得复杂时，事件总线可能会变得难以维护，因为事件的触发和监听分散在各个组件中，难以追踪。 2. 命名冲突： 如果事件名称没有规范，可能会出现命名冲突，导致事件无法正确触发或监听。 3. 调试困难： 事件的触发和监听是异步的，可能会增加调试难度。 4. 缺乏状态管理： 事件总线只负责事件的传递，不负责状态的管理，如果需要管理全局状态，还是需要使用Vuex。 5. 内存泄漏风险： 如果没有正确移除事件监听，可能会导致内存泄漏。
缺点 1. 可维护性差： 当项目变得复杂时，事件总线可能会变得难以维护，因为事件的触发和监听分散在各个组件中，难以追踪。 2. 命名冲突： 如果事件名称没有规范，可能会出现命名冲突，导致事件无法正确触发或监听。 3. 调试困难： 事件的触发和监听是异步的，可能会增加调试难度。 4. 缺乏状态管理： 事件总线只负责事件的传递，不负责状态的管理，如果需要管理全局状态，还是需要使用Vuex。 5. 内存泄漏风险： 如果没有正确移除事件监听，可能会导致内存泄漏。

四、使用事件总线的注意事项

  • 命名规范： 为了避免命名冲突，建议为事件名称添加前缀或后缀，例如：componentA:message。
  • 移除监听： 在组件销毁前，一定要移除对事件的监听，防止内存泄漏。可以使用 $off 方法移除监听，或者使用 Vue.observable 创建一个响应式的事件总线，并在组件销毁时将其设置为 null。
  • 避免过度使用： 事件总线适用于简单的通信场景，如果需要管理全局状态，或者组件之间的关系比较复杂，建议使用Vuex。
  • 调试： 使用Vue Devtools可以方便地调试事件总线。

五、代码优化

  1. TypeScript支持

    如果你的项目使用了 TypeScript，可以为事件总线添加类型定义，提高代码的可维护性和可读性。

    // event-bus.ts
import Vue from 'vue';

interface Events {
  'message': string;
  'user-login': { userId: number; username: string };
  // 其他事件...
}

const EventBus = new Vue();

export default {
  $on<K extends keyof Events>(event: K, callback: (payload: Events[K]) => void): void {
    EventBus.$on(event, callback);
  },
  $emit<K extends keyof Events>(event: K, payload: Events[K]): void {
    EventBus.$emit(event, payload);
  },
  $off<K extends keyof Events>(event: K, callback?: Function): void {
    EventBus.$off(event, callback);
  }
};

    使用方式：

    // ComponentA.vue
<script lang="ts">
import { defineComponent } from 'vue';
import EventBus from './event-bus';

export default defineComponent({
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A');
    },
    login() {
      EventBus.$emit('user-login', { userId: 123, username: 'John Doe' });
    }
  }
});
</script>
    // ComponentB.vue
<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import EventBus from './event-bus';

export default defineComponent({
  setup() {
    const message = ref('');
    const user = ref<{ userId: number; username: string } | null>(null);

    const handleMessage = (msg: string) => {
      message.value = msg;
    };

    const handleUserLogin = (userData: { userId: number; username: string }) => {
      user.value = userData;
    };

    onMounted(() => {
      EventBus.$on('message', handleMessage);
      EventBus.$on('user-login', handleUserLogin);
    });

    onBeforeUnmount(() => {
      EventBus.$off('message', handleMessage);
      EventBus.$off('user-login', handleUserLogin);
    });

    return {
      message,
      user
    };
  }
});
</script>

  2. 使用 mitt 替代 Vue 实例

    mitt 是一个非常小巧的 JavaScript 事件发射器/监听器，比 Vue 实例更轻量级。如果你的项目中不需要 Vue 实例的其他功能，可以使用 mitt 替代 Vue 实例作为事件总线。

    // event-bus.js
import mitt from 'mitt';

const emitter = mitt();

export default {
  $on: emitter.on,
  $emit: emitter.emit,
  $off: emitter.off
};

    使用方式与使用 Vue 实例作为事件总线类似，只需要将 EventBus.$on、EventBus.$emit 和 EventBus.$off 替换为 emitter.on、emitter.emit 和 emitter.off 即可。

六、更高级的用法（Vue 3 Composition API）

在Vue 3中，我们可以利用Composition API来创建一个更优雅的事件总线。

// useEventBus.js
import { reactive, onUnmounted } from 'vue';

export function useEventBus() {
  const bus = reactive({});

  const emit = (event, ...args) => {
    if (bus[event]) {
      bus[event].forEach(handler => handler(...args));
    }
  };

  const on = (event, handler) => {
    if (!bus[event]) {
      bus[event] = [];
    }
    bus[event].push(handler);

    const off = () => {
      bus[event] = bus[event].filter(h => h !== handler);
    };

    return off; // 返回一个取消监听的函数
  };

  return { emit, on };
}

使用方法:

// ComponentA.vue
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import { useEventBus } from './useEventBus.js';

export default {
  setup() {
    const { emit } = useEventBus();

    const sendMessage = () => {
      emit('my-event', 'Hello from Component A!');
    };

    return { sendMessage };
  }
};
</script>
// ComponentB.vue
<template>
  <div>Received message: {{ message }}</div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { useEventBus } from './useEventBus.js';

export default {
  setup() {
    const message = ref('');
    const { on } = useEventBus();

    let off; // 保存取消监听的函数

    onMounted(() => {
      off = on('my-event', (msg) => {
        message.value = msg;
      });
    });

    onUnmounted(() => {
      if (off) {
        off(); // 组件卸载时取消监听
      }
    });

    return { message };
  }
};
</script>

代码解释：

  • useEventBus：这是一个自定义的 Hook，用于创建和管理事件总线。
  • reactive({})： 使用 reactive 创建一个响应式的空对象，用于存储事件和处理函数。
  • emit： 用于触发事件，接收事件名称和参数。
  • on： 用于监听事件，接收事件名称和处理函数。返回一个取消监听的函数，方便在组件卸载时移除监听。
  • onMounted： 在组件挂载后，调用 on 函数监听事件，并将返回的取消监听函数保存在 off 变量中。
  • onUnmounted： 在组件卸载前，调用 off 函数取消监听，防止内存泄漏。

七、总结

事件总线是一个简单而强大的工具，可以帮助我们在Vue应用中实现跨组件的通信。但是，在使用事件总线时，一定要注意命名规范、移除监听、避免过度使用和调试等问题。希望通过今天的讲解，大家能够更好地理解和使用事件总线，让我们的Vue应用更加健壮和可维护。

今天的分享就到这里，感谢各位的观看！ 祝大家早点下班，早点回家！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注