vue中$on实现

在Vue中，$on 是事件监听的核心方法，用于自定义事件的订阅。以下是其实现原理和应用方式：

实现原理

Vue的事件系统基于发布-订阅模式，$on 方法将事件名和回调函数存储到实例内部的 _events 对象中（初始化时为空对象）。当事件触发时，通过 $emit 遍历执行对应事件名的回调队列。

Vue.prototype.$on = function (event, fn) {
  const vm = this;
  // 若事件名为数组，递归注册多个事件
  if (Array.isArray(event)) {
    for (let i = 0; i < event.length; i++) {
      vm.$on(event[i], fn);
    }
  } else {
    // 将回调函数推入_events对应事件的数组
    (vm._events[event] || (vm._events[event] = [])).push(fn);
  }
  return vm;
};

基础用法

监听自定义事件，通常在父子组件通信或全局事件总线中使用：

// 子组件触发事件
this.$emit('custom-event', data);

// 父组件监听事件
this.$on('custom-event', (data) => {
  console.log('接收数据:', data);
});

事件总线模式

通过创建空的Vue实例作为中央事件总线：

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

// 组件A监听事件
bus.$on('event-name', handler);

// 组件B触发事件
bus.$emit('event-name', payload);

注意事项

• 内存管理：手动监听的事件需在组件销毁时通过 $off 移除，避免内存泄漏。
• 单次监听：使用 $once 可实现只触发一次的事件监听。
• 响应式隔离：事件总线模式中的回调函数不会自动绑定组件上下文，需用箭头函数或 .bind(this)。

与Vue3差异

Vue 3移除了 $on API，推荐使用 mitt 或 tiny-emitter 等第三方库实现事件总线功能。