Vue.js源码分析-- eventsAPI--1.0.26

近期开发的项目中前端使用的是Vue框架，很轻量，也很好用。不过，因为用的是别人家开发的框架，代码执行的情况是否跟我们意料的一致值得思考。调试代码或者利用测试框架测试input/ouput挺好，不过我更倾向于看源码。能够被大众所广泛使用的框架的源码非常值得一看，好处就不多说了，因人而异。

这次我看的是vue源码里的eventsAPI部分，包括$emit/$broadcast/$dispatch等。

注：由于目前看到的只是冰山一角，所以牵连到其他部分的语句会暂时忽略，所以也有可能理解起来会有断章取义的可能，如果有理解错的还望指出，互相学习。在后续的源码阅读中，一有新的认识会立即更新。

eventsAPI源码位置：src/instance/api/events.js

私有函数 modifyListenerCount

var hookRE = /^hook:/
function modifyListenerCount (vm, event, count) {
  var parent = vm.$parent
  // hooks do not get broadcasted so no need
  // to do bookkeeping for them
  if (!parent || !count || hookRE.test(event)) return
  while (parent) {
    parent._eventsCount[event] =
      (parent._eventsCount[event] || 0) + count
    parent = parent.$parent
  }
}

在events.js里边多次调用到该函数，用于向上遍历父组件，更新事件计数器。

• 组件的_events属性，记录着每个event绑定的回调函数(数组)，比如_events[event] = [func1, func2, ...].

• 组件的_eventsCount属性，记录着自己以及子组件对每个event绑定的回调函数的总数目。每当子组件对event事件绑定了n个回调，那父组件（一直向上遍历到根）的_eventsCount[event]会+n。目前发现，_eventsCount在$broadcast会使用到。

Vue.prototype.$on

Vue.prototype.$on = function (event, fn) {
  (this._events[event] || (this._events[event] = []))
    .push(fn)
  modifyListenerCount(this, event, 1)
  return this
}

基础函数，事件监听绑定。组件将回调函数fn保存在_events[event]中，对同一event可以绑定多个回调函数，同时，通过modifyListenerCount更新所有父组件的_eventsCount[event]。

Vue.prototype.$once

Vue.prototype.$once = function (event, fn) {
  var self = this
  function on () {
    self.$off(event, on)
    fn.apply(this, arguments)
  }
  on.fn = fn
  this.$on(event, on)
  return this
}

$once：当event事件发生时，fn只会被调用一次，调用完成后通过$off解除绑定。

Vue.prototype.$off

Vue.prototype.$off = function (event, fn) {
  var cbs
  // all
  if (!arguments.length) {
    if (this.$parent) {
      for (event in this._events) {
        cbs = this._events[event]
        if (cbs) {
          modifyListenerCount(this, event, -cbs.length)
        }
      }
    }
    this._events = {}
    return this
  }
  // specific event
  cbs = this._events[event]
  if (!cbs) {
    return this
  }
  if (arguments.length === 1) {
    modifyListenerCount(this, event, -cbs.length)
    this._events[event] = null
    return this
  }
  // specific handler
  var cb
  var i = cbs.length
  while (i--) {
    cb = cbs[i]
    if (cb === fn || cb.fn === fn) {
      modifyListenerCount(this, event, -1)
      cbs.splice(i, 1)
      break
    }
  }
  return this
}

$off：解除事件绑定，源码可以看出它的三个调用方式：

• vm.$off()
  不带参数：将删除组件所有绑定的事件(this._events = {})，在此之前，会遍历更新父组件的计数器。

• vm.$off(event)
  只带参数event：将删除组件对event绑定的所有事件，同样会遍历更新父组件的计数器。

• vm.$off(event, fn)
  带齐参数event和fn：将删除组件对event事件绑定的fn回调，同样会遍历更新父组件的计数器。

Vue.prototype.$emit

Vue.prototype.$emit = function (event) {
  var isSource = typeof event === 'string'
  event = isSource
    ? event
    : event.name
  var cbs = this._events[event]
  var shouldPropagate = isSource || !cbs
  if (cbs) {
    cbs = cbs.length > 1
      ? toArray(cbs)
      : cbs
    // 这里的特殊处理暂且忽略，还得从其他源码推敲
    // this is a somewhat hacky solution to the question raised
    // in #2102: for an inline component listener like <comp @test="doThis">,
    // the propagation handling is somewhat broken. Therefore we
    // need to treat these inline callbacks differently.
    var hasParentCbs = isSource && cbs.some(function (cb) {
      return cb._fromParent
    })
    if (hasParentCbs) {
      shouldPropagate = false
    }
    var args = toArray(arguments, 1)
    for (var i = 0, l = cbs.length; i < l; i++) {
      var cb = cbs[i]
      var res = cb.apply(this, args)
      if (res === true && (!hasParentCbs || cb._fromParent)) {
        shouldPropagate = true
      }
    }
  }
  return shouldPropagate
}

$emit：用于调用自身对event绑定的回调函数。该函数会被$broadcast和$dispatch调用，所以对参数的event进行了适配。部分变量备注：

• isSource：是否是源组件发出的$emit事件。也就是说，只有直接调用vm.$emit事件或者$dispatch率先触发自己绑定的回调（$dispatch源码第一行）的时候，参数是event字符串，此时isScource才为true。其他情况，如$broadcast内部调用$emit，其参数会是一个非字符串，在下面的$broadcast和$dispatch可以看到，此时的参数会是{ name: event, source: this }。

• event：由isSource可以得到：event即事件(字符串)。

• shouldPropagate：是否需要继续传播事件触发。源码中，遍历了event绑定的事件，除开(!hasParentCbs || cb._fromParent)这个不说，只要执行的绑定事件明确return true，shouldPropagate才会置为true。对于$progress，如果shouldPropagate为true，会触发继续向下传播事件。

Vue.prototype.$broadcast

Vue.prototype.$broadcast = function (event) {
  var isSource = typeof event === 'string'
  event = isSource
    ? event
    : event.name
  // if no child has registered for this event,
  // then there's no need to broadcast.
  if (!this._eventsCount[event]) return
  var children = this.$children
  var args = toArray(arguments)
  if (isSource) {
    // use object event to indicate non-source emit
    // on children
    args[0] = { name: event, source: this }
  }
  for (var i = 0, l = children.length; i < l; i++) {
    var child = children[i]
    var shouldPropagate = child.$emit.apply(child, args)
    if (shouldPropagate) {
      child.$broadcast.apply(child, args)
    }
  }
  return this
}

此处isSource的理解跟$emit的理解差不多，指代是否最开始调用$broadcast。

这里vm._eventsCount[event]起到作用了，如果该计数为0，说明其所有子组件包括递归下去的子组件都没有对event绑定回调。

从for循环的写法可以看出，这里何时停止事件传播使用的方法类似于深度优先搜索（DFS）如下图

A组件发出$broadcast，自身不会调用监听event的事件，而是传递给子组件，子组件B1率先执行监听event的事件，其中有一个绑定事件return true，那么该B1继续传播事件，C1率先执行，C1所有监听event的回调事件都没有return true，所以C1不会往它的子组件传播事件。

到此，只是遍历完最左侧的线，接下来轮到C2执行，C2执行后再决定是否需要传递给其子组件，接下来C3....执行完B1的子组件，接下来就B2，然后...

从这里可以看出，如果某一层一个组件return true，那么会继续遍历新一层子组件，有点雪崩式的爆发，return true或许会导致性能下降，这种事件通知的机制或许需要改善改善，因为假设我只要通知B1和C1，结果还是会遍历B层其他组件还有C层其他组件，这样会消耗多余的资源，且注意，这里是同步。

Vue.prototype.$dispatch

Vue.prototype.$dispatch = function (event) {
  var shouldPropagate = this.$emit.apply(this, arguments)
  if (!shouldPropagate) return
  var parent = this.$parent
  var args = toArray(arguments)
  // use object event to indicate non-source emit
  // on parents
  args[0] = { name: event, source: this }
  while (parent) {
    shouldPropagate = parent.$emit.apply(parent, args)
    parent = shouldPropagate
      ? parent.$parent
      : null
  }
  return this
}

$dispatch相对简单，先触发自身对event绑定的回调，如果自己没有监听event的回调，则会继续调用父组件触发相应绑定的事件。如果有回调，还需要判断_fromParent这个属性，这个不知何物，待发掘。

假设A->B->C三层，B发出$dispatch('e')，想要B和A执行，那么B需要return true; C发出$dispatch('e')，想要C和B执行，那么C需要return true。但此时B也return true了，所以A也会触发。所以如果遇到这种情况，可以修改dispatch的事件名字，比如C换成$dispatch('f')；或者通过传递其他参数来判断是否需要return true。（推荐前者，比较干净）

总结

Vue的eventsAPI是比较好理解的模块，在看源码以前，原以为$broadcast和$dispatch是在$nextTick实现，现在才意识到是一调用便执行。所以如果有多个地方会return true,还是需要考虑下用其他方法，不然会阻塞挺久的。