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);

原理总结

1. 事件存储：Vue 实例通过 _events 对象存储事件和回调。
2. 发布-订阅：$emit 触发事件，$on 监听事件。
3. 跨组件通信：通过事件总线或全局状态管理工具实现。
4. 性能优化：避免滥用事件总线，合理使用 $off 清理无用事件。