vue事件实现原理

Vue 事件实现原理

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

事件注册与存储

Vue 实例内部通过 _events 对象存储事件监听器。当调用 $on 方法时，会将事件名作为键，监听器函数作为值存入 _events 对象。如果是多个监听器，则以数组形式存储。

// 伪代码示例
Vue.prototype.$on = function (event, fn) {
  const vm = this
  ;(vm._events[event] || (vm._events[event] = [])).push(fn)
  return vm
}

事件触发

调用 $emit 方法时，会根据事件名从 _events 中取出对应的监听器函数列表，依次执行。支持传递参数，这些参数会传递给监听器函数。

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

事件移除

$off 方法用于移除事件监听器。可以移除指定事件的某个监听器、所有监听器，或移除所有事件的所有监听器。

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

自定义事件与原生事件

Vue 还区分自定义事件和原生 DOM 事件：

• 自定义事件通过 $emit 和 $on 实现组件间通信。
• 原生 DOM 事件通过 v-on 指令绑定，底层调用 addEventListener。

事件修饰符

Vue 提供的事件修饰符（如 .stop、.prevent）在编译阶段会被解析为对应的原生 DOM 操作。例如：

• .stop 会调用 event.stopPropagation()
• .prevent 会调用 event.preventDefault()

总结

Vue 的事件系统通过 _events 对象管理监听器，利用发布-订阅模式实现高效的事件通信。其设计兼顾了灵活性和性能，同时通过修饰符简化了原生事件的处理。