vue事件实现原理
Vue 事件实现原理
Vue 的事件系统基于发布-订阅模式，通过 $on、$emit、$off 等方法实现组件间通信。其核心原理分为以下几个部分：
事件注册与监听
Vue 实例初始化时，会在内部创建一个事件中心（_events 对象），用于存储所有注册的事件及其回调函数。通过 $on 方法注册事件，回调函数会被添加到对应事件的数组中。
// 示例：事件注册
vm.$on('custom-event', function (payload) {
console.log('事件触发:', payload);
});事件触发
通过 $emit 方法触发事件时，Vue 会从 _events 中查找对应的事件回调列表，并依次执行。回调函数的参数由 $emit 传递。
// 示例：事件触发
vm.$emit('custom-event', { data: 'test' });事件解绑
通过 $off 移除事件监听器。若不指定回调函数，则移除该事件的所有监听器；若未指定事件名，则移除所有事件监听器。
// 示例：移除事件监听
vm.$off('custom-event'); // 移除所有 custom-event 监听器
vm.$off(); // 移除所有事件监听器原生 DOM 事件与自定义事件
- 原生 DOM 事件：通过
v-on指令绑定到模板元素，最终调用原生addEventListener。 - 自定义事件：用于组件通信，父组件通过
v-on监听子组件触发的自定义事件（子组件通过$emit触发）。
<!-- 父组件监听子组件事件 -->
<child-component @custom-event="handleEvent"></child-component>实现细节
- 事件中心存储：
_events对象以事件名为键，值为回调函数数组。 - 跨组件通信：通过
$emit向上冒泡，或结合$attrs和$listeners实现跨层级传递。 - 性能优化：避免滥用事件，必要时使用
$once注册一次性事件。
源码关键逻辑
Vue 的事件处理逻辑主要在 src/core/instance/events.js 中实现：
$on：将回调推入_events[event]数组。$emit：遍历_events[event]并执行回调。$off：从数组中移除指定回调或清空数组。
通过这套机制，Vue 实现了灵活高效的组件间通信。
