Vue源码学习之initEvents-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34179086/article/details/88081618

本文探讨Vue源码中的initEvents过程，详细解析了如何初始化组件事件、updateComponentListeners的工作原理，以及add、remove操作，包括$on、$once、$off和$emit的实现细节，阐述了Vue事件系统的内部运作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue源码学习之initEvents

initLifecycle是Vue源码中core/instance/events.js下的一个函数，和上节的initLiftcycle一样，该函数也是在beforeCreate钩子之前调用，作用是初始化组件中的事件。下面让我们来进行代码分析。

1、initEvents

function initEvents (vm: Component) {
   
  // 存放事件的空对象
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events（初始化父组件绑定在该组件上的事件）
  const listeners = vm.$options._parentListeners
  if (listeners) {
   
    updateComponentListeners(vm, listeners)
  }
}

这个函数的功能就是初始化了一个存放事件的空对象，只存放挂载在该组件上的事件。_hasHookEvent属性是表示父组件是否有将钩子函数绑定到该组件上。如果父组件有绑定事件到该组件上则调用updateComponentListeners方法，下面看一下该方法的实现。

2、updateComponentListeners

function updateComponentListeners (
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
   
  target = vm
  updateListeners(listeners, oldListeners || {
   }, add, remove, vm)
  target = undefined
}

这个方法没有什么内容，主要就是调用updateListeners更新Listener，比较重要的就是add和remove两个参数，这两个方法是Vue中自己实现两个添加Listener、移除Listener的方法。

3、add

function add (event, fn, once) {
   
  if (once) {
   
    target.$once(event, fn)
  } else {
   
    target.$on(event, fn)
  }
}

可以看到该方法主要依赖的是 $o n 和$ once两个vue实例上的方法，这两个方法还有 $e m i t 和$ off方法都是通过一个eventsMixin方法挂载到Vue原型对象上的，下面让我们了解一下这两个方法的实现。

$on

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++) {
   
        this.$on(event[i], fn)