当前位置：首页 > VUE

vue订阅者实现

2026-02-18 15:30:36VUE

Vue 订阅者实现

在 Vue 中，订阅者模式通常用于组件间的通信或响应式数据的监听。以下是几种常见的实现方式：

使用 Vue 的 `$on` 和 `$emit`

Vue 实例提供了 $on 和 $emit 方法，用于实现事件的订阅与发布。

// 发布者
const publisher = new Vue();

// 订阅者
publisher.$on('event-name', (data) => {
  console.log('Received data:', data);
});

// 发布事件
publisher.$emit('event-name', { message: 'Hello, subscriber!' });

使用 Vuex 的状态管理

Vuex 是 Vue 的官方状态管理库，适合复杂应用的订阅者模式实现。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload;
    }
  }
});

// 订阅者
store.subscribe((mutation, state) => {
  if (mutation.type === 'updateMessage') {
    console.log('Message updated:', state.message);
  }
});

// 发布者
store.commit('updateMessage', 'New message');

使用 `watch` 监听数据变化

Vue 的 watch 可以监听数据变化并触发回调。

new Vue({
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed from', oldVal, 'to', newVal);
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
    }
  }
});

使用 EventBus

创建一个全局的 Vue 实例作为事件总线，实现跨组件通信。

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

// 订阅者
EventBus.$on('event-name', (data) => {
  console.log('Event received:', data);
});

// 发布者
EventBus.$emit('event-name', { key: 'value' });

使用第三方库（如 mitt）

mitt 是一个轻量级的事件发射器库，适合简单的订阅者模式实现。

import mitt from 'mitt';

const emitter = mitt();

// 订阅者
emitter.on('event-name', (data) => {
  console.log('Event received:', data);
});

// 发布者
emitter.emit('event-name', { key: 'value' });

以上方法可以根据具体需求选择，适用于不同场景的订阅者模式实现。

vue订阅者实现