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 等第三方库实现事件总线功能。
