vue 事件实现原理
Vue 事件实现原理
Vue 的事件系统基于发布-订阅模式，通过 $on、$emit 等方法实现组件间通信。核心原理包括事件注册、事件触发和事件监听。
事件注册与监听
Vue 实例在初始化时会创建一个 _events 对象，用于存储所有注册的事件及其对应的回调函数。当调用 $on 方法时，事件名和回调函数会被添加到 _events 中。
// 示例：事件监听
this.$on('custom-event', callbackFunction);事件触发
通过 $emit 方法触发事件时，Vue 会从 _events 中查找对应事件名的回调函数列表，并依次执行这些回调函数。触发时可以传递任意数量的参数。
// 示例：事件触发
this.$emit('custom-event', arg1, arg2);事件移除
使用 $off 方法可以移除特定事件的所有回调函数，或移除指定的单个回调函数。如果不传递参数，则会移除所有事件监听器。
// 示例：移除事件监听
this.$off('custom-event'); // 移除所有回调
this.$off('custom-event', callbackFunction); // 移除指定回调原生 DOM 事件与自定义事件
Vue 对原生 DOM 事件（如 click）进行了封装，通过 v-on 指令实现绑定。自定义事件（如组件通信）则通过 $emit 和 $on 实现。
<!-- 原生 DOM 事件 -->
<button v-on:click="handleClick">Click</button>
<!-- 自定义事件 -->
<child-component @custom-event="handleCustomEvent"></child-component>事件派发与广播（Vue 2.x）
在 Vue 2.x 中，$dispatch 和 $broadcast 用于跨组件通信，但已在 Vue 3 中废弃，推荐使用 $emit 和事件总线或 Vuex 替代。
// Vue 2.x 示例（已废弃）
this.$dispatch('event-name', payload);
this.$broadcast('event-name', payload);事件总线模式
通过创建一个空的 Vue 实例作为事件总线，可以实现跨组件通信。
// 创建事件总线
const eventBus = new Vue();
// 组件A：监听事件
eventBus.$on('event-name', callback);
// 组件B：触发事件
eventBus.$emit('event-name', payload);原理总结
- 事件存储：Vue 实例通过
_events对象存储事件和回调。 - 发布-订阅：
$emit触发事件，$on监听事件。 - 跨组件通信：通过事件总线或全局状态管理工具实现。
- 性能优化：避免滥用事件总线，合理使用
$off清理无用事件。
