vue事件实现原理

Vue 事件实现原理

Vue 的事件系统基于发布-订阅模式，通过 $on、$emit 等方法实现组件间通信。以下是核心实现原理的分解：

事件注册与存储

Vue 实例内部通过 _events 对象存储事件监听器。调用 $on(event, callback) 时，会将回调函数按事件名存入 _events：

// 简化版实现
Vue.prototype.$on = function (event, fn) {
  (this._events[event] || (this._events[event] = [])).push(fn);
};

事件触发

$emit(event, ...args) 会从 _events 中查找对应事件名的回调数组，并依次执行：

Vue.prototype.$emit = function (event, ...args) {
  const cbs = this._events[event];
  if (cbs) {
    cbs.forEach(fn => fn.apply(this, args));
  }
};

事件移除

$off(event, callback) 会从 _events 中移除指定事件的回调：

Vue.prototype.$off = function (event, fn) {
  if (!arguments.length) {
    this._events = Object.create(null);
    return;
  }
  const cbs = this._events[event];
  if (!cbs) return;
  if (!fn) {
    this._events[event] = null;
    return;
  }
  this._events[event] = cbs.filter(cb => cb !== fn);
};

自定义事件与原生事件

• 自定义事件：通过 $emit 和 $on 实现父子组件通信，例如 v-on:my-event 会被编译为 $on('my-event')。
• 原生 DOM 事件：通过 v-on 或 @ 绑定到模板时，Vue 会调用原生 addEventListener，并在组件销毁时自动解绑。

事件修饰符原理

例如 .stop 和 .prevent 等修饰符会在编译阶段转换为对应的原生事件操作：

// .stop 修饰符的实现逻辑
if (event.stopPropagation) event.stopPropagation();

性能优化

Vue 通过事件缓存机制（如 $once）和自动解绑（组件销毁时调用 $off）避免内存泄漏。