vue实现发布订阅模式
发布订阅模式简介
发布订阅模式（Pub-Sub）是一种消息通信模式，发布者（Publisher）和订阅者（Subscriber）通过事件中心（Event Bus）解耦。Vue 本身基于观察者模式实现响应式系统，但可通过自定义事件机制模拟发布订阅模式。
基于 Vue 的自定义事件实现
Vue 实例提供 $on、$emit 和 $off 方法，可直接用于发布订阅逻辑。
// 创建事件中心（Event Bus）
const eventBus = new Vue();
// 订阅事件
eventBus.$on('event-name', (payload) => {
console.log('收到事件:', payload);
});
// 发布事件
eventBus.$emit('event-name', { data: 'test' });
// 取消订阅
eventBus.$off('event-name');封装独立的 Event Bus 类
通过继承 Vue 或封装原生事件机制实现更独立的模块：
class EventBus {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(cb => cb(...args));
}
}
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
}
// 使用示例
const bus = new EventBus();
bus.on('update', data => console.log(data));
bus.emit('update', '新数据');在 Vue 组件中的应用
通过全局注入或按需引入 Event Bus：
// main.js 中全局挂载
Vue.prototype.$eventBus = new Vue();
// 组件内使用
export default {
created() {
this.$eventBus.$on('global-event', this.handleEvent);
},
methods: {
handleEvent(payload) {
console.log('全局事件触发:', payload);
}
},
beforeDestroy() {
this.$eventBus.$off('global-event');
}
}注意事项
- 内存泄漏：组件销毁时需通过
$off清理订阅。 - 命名冲突：事件名建议使用命名空间（如
module:event）。 - 性能影响：高频事件需考虑防抖/节流。
替代方案
- Vuex：适合复杂状态管理，内置事件系统。
- 第三方库：如
mitt（轻量级 Event Bus）。
// mitt 示例
import mitt from 'mitt';
const emitter = mitt();
emitter.on('event', () => {});
emitter.emit('event');
