Vue中events.js解读

源码位置

• src/core/instance/events.js

逐行分析

• 首先看一下它里面用到的另一个文件中暴露的方法，在src/core/vdom/helpers/update-listeners.js中。

// 更新一个组件实例内部的事件的listener的方法
/**
 * on 一个listeners对象
 * oldOn 旧的listeners对象
 * add 绑定listener的方法
 * remove 移除listener的方法
 * createOnceHandler 绑定一次的方法
 * vm 组件实例
 **/
export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {
  let name, def, cur, old, event
  for (name in on) {
    def = cur = on[name]
    old = oldOn[name]
    // 这个方法在这个文件里面可以找到，获取这个解析这个事件名称，得到的结果是{ name, once, capture, passive, handle, params }，看这个事件是否是只执行一次，是否冒泡，以及是否阻止默认行为等属性
    event = normalizeEvent(name) 
    /* istanbul ignore if */
    if (__WEEX__ && isPlainObject(def)) {
      cur = def.handler
      event.params = def.params
    }
    // isUndef方法在src/core/shared/util.js中定义，判断参数是否等于undefined或者null
    // 如果当前的定义的事件对应的对象是个空对象或者未定义，那就抛出一个警告，缺少事件处理的回调
    if (isUndef(cur)) {
      process.env.NODE_ENV !== 'production' && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    } else if (isUndef(old)) { 
      // 或者之前没有定义该事件，相当于新增一个事件监听
      if (isUndef(cur.fns)) {
        cur = on[name] = createFnInvoker(cur, vm)
      }
      // 如果once属性为true，就绑定一个只执行一次的listener，也就是在执行过后直接off掉该事件
      if (isTrue(event.once)) {
        cur = on[name] = createOnceHandler(event.name, cur, event.capture)
      }
      // 调用传进来的添加监听事件
      add(event.name, cur, event.capture, event.passive, event.params)
    } else if (cur !== old) {
      // 相当于事件监听的listener发生了变化
      old.fns = cur // 旧的listener中改变fns指向cur
      on[name] = old
    }
  }
  // 移除掉旧监听集合中的无效监听
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

• 再来看看主要的事件机制的代码，先看几个内部定义的方法

// target是一个中间变量，当需要进行绑定事件的时候会指向组件实例，使用完成之后就会变成null
// 这个就是传给上面方法的add
function add (event, fn) {
  target.$on(event, fn)
}

// 传给上面方法的remove
function remove (event, fn) {
  target.$off(event, fn)
}

// 调用上面的方法去初始化这个组件实例的listeners
export function updateComponentListeners (
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
  target = vm
  updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
  target = undefined
}

// 暴露了一个初始化组件实例的_events和_hasHookEvent的属性，组件初始化的时候会调用该方法
export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events，这一步就是将父组件监听子组件发射的事件全部存在_events中
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

// 生成一个只执行一次的事件监听，也是传给上面提到的方法的参数，实现也很简单，就是执行完成了就解绑
function createOnceHandler (event, fn) {
  const _target = target
  return function onceHandler () {
    const res = fn.apply(null, arguments)
    if (res !== null) {
      _target.$off(event, onceHandler)
    }
  }
}

• 看完了用到的一些方法，再看看主要的代码，也就是on, once， off, emit的实现。

// 这个在组件初始化的时候也会调用，直接给组件实例附加$on,$off,$emit方法。
export function eventsMixin (Vue: Class<Component>) {
  const hookRE = /^hook:/
  // 看来$on同时监听多个事件，调用同一个回调, 'click', ['click', 'hover']应该都可以，数组应该是2.2之后才能用的
  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    const vm: Component = this
    // 如果是数组，就直接递归调用本身的$on方法
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn)
      }
    } else {
      // 单个事件名称的时候，向组件实例的_events竖向中添加一组监听，一个事件可以有多个监听事件的回调
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      // 处理hook事件
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }

  // 没啥好看的，就是在执行之后解绑了
  Vue.prototype.$once = function (event: string, fn: Function): Component {
    const vm: Component = this
    function on () {
      vm.$off(event, on)
      fn.apply(vm, arguments)
    }
    on.fn = fn
    vm.$on(event, on)
    return vm
  }

  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    const vm: Component = this
    // all,如果调用$off()没有传参，默认清空_events记录的所有事件监听映射
    if (!arguments.length) {
      vm._events = Object.create(null)
      return vm
    }
    // array of events，数组的话就直接遍历之后递归
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$off(event[i], fn)
      }
      return vm
    }
    // specific event
    const cbs = vm._events[event]
    if (!cbs) { // 没有找到对应的handler就直接返回，没有需要移除的
      return vm
    }
    if (!fn) { // 如果没有传入对应的handler，那就直接把该事件的监听handler置为null
      vm._events[event] = null
      return vm
    }
    // specific handler，如果传入了对应的handler，就从事件监听回调队列中找到对应的handler并移除
    let cb
    let i = cbs.length
    while (i--) {
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1)
        break
      }
    }
    return vm
  }

  Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this
    if (process.env.NODE_ENV !== 'production') {
      const lowerCaseEvent = event.toLowerCase()
      // 自己发射自己监听，就推荐使用v-on绑定事件就可以
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          `Event "${lowerCaseEvent}" is emitted in component ` +
          `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
          `Note that HTML attributes are case-insensitive and you cannot use ` +
          `v-on to listen to camelCase events when using in-DOM templates. ` +
          `You should probably use "${hyphenate(event)}" instead of "${event}".`
        )
      }
    }
    // 这个地方一开始，我也没看明白，后来发现是因为初始化的时候把父组件监听子组件发射的事件已经绑定到子组件的_events中了，所以如果子组件在发射了事件之后，如果发现父组件已经有了对应的处理方法，就执行对应的回调
    let cbs = vm._events[event]
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      const info = `event handler for "${event}"`
      for (let i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info)
      }
    }
    return vm
  }
}

小结

• 个人理解，事件绑定就是通过原生的事件触发其组件内部已经定义好的句柄，emit看起来是发射了一个事件出去，实际只是执行了在初始化就传递过来的父组件绑定的监听回调，相当于一个ajax的回调，因为不知道子组件啥时候会发射事件，我之前还以为是父组件里面会去捕获到子组件的事件，然后在父组件中去执行回调。