vue中$on实现

Vue 中 $on 的实现原理

Vue 中的 $on 是事件监听的核心方法，用于订阅自定义事件。其实现依赖于 Vue 的事件系统，本质是一个发布-订阅模式。

核心代码逻辑

Vue 的 $on 方法定义在 src/core/instance/events.js 中：

Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
  const vm: Component = this
  if (Array.isArray(event)) {
    for (let i = 0, l = event.length; i < l; i++) {
      vm.$on(event[i], fn)
    }
  } else {
    (vm._events[event] || (vm._events[event] = [])).push(fn)
  }
  return vm
}

关键实现细节

事件存储结构 每个 Vue 实例内部维护一个 _events 对象，用于存储事件名和对应的回调函数数组。当调用 $on 时，会将回调函数添加到对应事件名的数组中。

多事件注册支持 $on 的第一个参数可以是字符串或数组。如果是数组，会遍历数组为每个事件名注册相同的回调函数。

返回实例 方法返回 Vue 实例本身，支持链式调用。

典型使用场景

// 单个事件监听
this.$on('custom-event', handler)

// 多个事件监听
this.$on(['event1', 'event2'], handler)

与相关方法的协作

$emit 触发事件时会从 _events 中查找对应事件名的回调数组并执行。 $off 移除事件监听时会操作 _events 中的对应回调数组。 $once 通过 $on 和立即执行的 $off 组合实现一次性监听。