Vue.js源码学习三 —— 事件 Event 学习

发表于 | 更新于

早上好！继续学习Vue源码~这次我们来学习 event 事件。

源码简析

其实看了前两篇的同学已经知道源码怎么找了，这里再提一下。
先找到Vue核心源码index方法 src/core/instance/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 中定义的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export function eventsMixin (Vue: Class<Component>) {
  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    ……
  }

  Vue.prototype.$once = function (event: string, fn: Function): Component {
    ……
  }

  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    ……
  }

  Vue.prototype.$emit = function (event: string): Component {
    ……
  }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
export function initMixin (Vue: Class<Component>) {
  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

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

1
2
3
4
5
6
7
8
9
10
// src/core/instance/events.js
export 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 参数，所以我简化了下代码，简化代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// src/core/vdom/helpers/update-listeners.js
export 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方法如下：

1
2
3
4
5
6
7
8
9
10
11
// src/core/instance/events.js
// target 临时引用vm，用完后即变为undefined
var target;

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

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

$on

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

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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++) {
      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 事件，这只是一种优化方式，与我们主题关系不大，具体请看代码~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// src/core/instance/lifecycle.js
export 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

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

代码

1
2
3
4
5
6
7
8
9
10
11
// 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

移除自定义事件监听器。

  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器。

代码如下，分析见注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// src/core/instance/events.js
Vue.prototype.$off = function (event?: string | Array<string>, 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

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

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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，遍历事件监听器数组传参执行回调函数。

最后

就这么多啦~其实事件还是很简单的。明后天研究研究渲染这个难点！我们后天见！

Vue.js学习系列

鉴于前端知识碎片化严重，我希望能够系统化的整理出一套关于Vue的学习系列博客。

Vue.js学习系列项目地址

本文源码已收入到GitHub中，以供参考，当然能留下一个star更好啦^-^。
https://github.com/violetjack/VueStudyDemos

关于作者

VioletJack，高效学习前端工程师，喜欢研究提高效率的方法，也专注于Vue前端相关知识的学习、整理。
欢迎关注、点赞、评论留言~我将持续产出Vue相关优质内容。

新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
简书： http://www.jianshu.com/users/54ae4af3a98d/latest_articles
Github： https://github.com/violetjack