源码简析

其实看了前两篇的同学已经知道源码怎么找了，这里再提一下。

先找到Vue核心源码index方法 src/core/instance/index.js

function Vue (options) {  if (process.env.NODE_ENV !== 'production' &&    !(this instanceof Vue)  ) {    warn('Vue is a constructor and should be called with the `new` keyword')  }  this._init(options)}initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)

index方法中定义了一个Vue的构造函数执行 _init 方法初始化，然后执行了多个 xxxMixin 方法，这些方法是为Vue 的构造函数定义各类属性的。比如我们今天关注的事件，Vue的几个事件方法都是在 eventsMixin 中定义的。

export function eventsMixin (Vue: Class
    
     ) {  Vue.prototype.$on = function (event: string | Array
     
      , fn: Function): Component {    ……  }  Vue.prototype.$once = function (event: string, fn: Function): Component {    ……  }  Vue.prototype.$off = function (event?: string | Array
      
       , fn?: Function): Component {    ……  }  Vue.prototype.$emit = function (event: string): Component {    ……  }}

另外要注意的是，initMixin 方法中定义了Vue的初始化方法 _init，该方法中对Vue各类属性进行了初始化。

export function initMixin (Vue: Class
    
     ) {  Vue.prototype._init = function (options?: Object) {    if (options && options._isComponent) {      initInternalComponent(vm, options)    } else {      vm.$options = mergeOptions(        resolveConstructorOptions(vm.constructor),        options || {},        vm      )    }    initProxy(vm)    vm._self = vm    initLifecycle(vm)    initEvents(vm)    initRender(vm)    callHook(vm, 'beforeCreate')    initInjections(vm) // resolve injections before data/props    initState(vm)    initProvide(vm) // resolve provide after data/props    callHook(vm, 'created')    if (vm.$options.el) {      vm.$mount(vm.$options.el)    }  }}

所以，在本篇博客中只需要关注 initEvents 和 eventsMixin 方法即可

initEvents

初始化过程很简单，清空数据，并初始化连接父级的事件。

// src/core/instance/events.jsexport 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)  }}

我深入看了下 updateComponentListeners 方法，最终走到了 src/core/vdom/helpers/update-listeners.js 的 updateListeners 方法中，因为并没有传 oldOn 参数，所以我简化了下代码，简化代码如下：

// src/core/vdom/helpers/update-listeners.jsexport function updateListeners (  on: Object,  oldOn: Object,  add: Function,  remove: Function,  vm: Component) {  let name, def, cur, old, event  for (name in on) {    def = cur = on[name]    old = oldOn[name]    event = normalizeEvent(name)    if (isUndef(old)) {      if (isUndef(cur.fns)) {        cur = on[name] = createFnInvoker(cur)      }      add(event.name, cur, event.once, event.capture, event.passive, event.params)    }  }}

其中这个add方法如下：

// src/core/instance/events.js// target 临时引用vm，用完后即变为undefinedvar target;function add (event, fn, once) {  if (once) {    target.$once(event, fn);  } else {    target.$on(event, fn);  }}

整理下来就是将父级的事件定义到当前vm中。

$on

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

代码如下

// src/core/instance/events.js  Vue.prototype.$on = function (event: string | Array
    
     , 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)      }    } else {      (vm._events[event] || (vm._events[event] = [])).push(fn)      // 通过使用标记为注册而不是散列查找的布尔标记来优化钩子 hook: 事件成本。      if (hookRE.test(event)) {        vm._hasHookEvent = true      }    }    return vm  }

如果 event 是数组则遍历执行 $on 方法（2.2.0+ 中支持）；

否则向 vm._events[event] 中传递回调函数 fn，这里既然 vm._events[event] 是一个数组，那么我猜想一个 event 可以执行多个回调函数咯？

如果是 event 字符串中有 hook:，修改 vm._hasHookEvent 的状态。如果 _hasHookEvent 为 true，那么在触发各类生命周期钩子的时候会触发如 hook:created 事件，这只是一种优化方式，与我们主题关系不大，具体请看代码~

// src/core/instance/lifecycle.jsexport function callHook (vm: Component, hook: string) {  const handlers = vm.$options[hook]  if (handlers) {    for (let i = 0, j = handlers.length; i < j; i++) {      try {        handlers[i].call(vm)      } catch (e) {        handleError(e, vm, `${hook} hook`)      }    }  }  if (vm._hasHookEvent) {    vm.$emit('hook:' + hook)  }}

$once

监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

代码

// src/core/instance/events.js  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  }

这个就简单了，定义一个 $on 事件监听，回调函数中使用 $off 方法取消事件监听，并执行回调函数。

$off

移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；

如果只提供了事件，则移除该事件所有的监听器；

如果同时提供了事件与回调，则只移除这个回调的监听器。

代码如下，分析见注释。

// src/core/instance/events.js  Vue.prototype.$off = function (event?: string | Array
    
     , fn?: Function): Component {    const vm: Component = this    // 如果没有参数，关闭全部事件监听器    if (!arguments.length) {      vm._events = Object.create(null)      return vm    }    // 关闭数组中的事件监听器    if (Array.isArray(event)) {      for (let i = 0, l = event.length; i < l; i++) {        this.$off(event[i], fn)      }      return vm    }    // 具体某个事件监听    const cbs = vm._events[event]    // 没有这个监听事件，直接返回vm    if (!cbs) {      return vm    }    // 没有 fn，将事件监听器变为null，返回vm    if (!fn) {      vm._events[event] = null      return vm    }    // 有回调函数    if (fn) {      // specific handler      let cb      let i = cbs.length      while (i--) {        // cbs = vm._events[event] 是一个数组        cb = cbs[i]        if (cb === fn || cb.fn === fn) {          // 移除 fn 这个事件监听器          cbs.splice(i, 1)          break        }      }    }    return vm  }

$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

代码

// src/core/instance/events.js  Vue.prototype.$emit = function (event: string): Component {    const vm: Component = this    let cbs = vm._events[event]    if (cbs) {      cbs = cbs.length > 1 ? toArray(cbs) : cbs      const args = toArray(arguments, 1)      for (let i = 0, l = cbs.length; i < l; i++) {        try {          cbs[i].apply(vm, args)        } catch (e) {          handleError(e, vm, `event handler for "${event}"`)        }      }    }    return vm  }

代码分析：首先获取 vm._events[event] ，之前我们说过这玩意是个数组；如果有这个事件监听器，从第二个参数开始获取作为触发方法的传参 args，遍历事件监听器数组传参执行回调函数。