上篇文章中,我们主要讲了initLiftcycle方法,它的作用是初始化vm实例中和生命周期相关的属性。今天为大家介绍另一个方法——initEvents。
从这个方法的名称来看,我们知道它是和事件相关的方法,具体怎么相关,我们先来看源码。
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)
}
}
先看第一行
vm._events = Object.create(null)
该行代码创建了一个原型为null的空对象,并把它赋值给vm实例的_events属性。关于Object.create,不明白的同学可以点这里查看。关于vm._events,很多博文中提到该属性就是笼统的说是用来存放事件的对象,那么到底存放什么事件呢?vm的所有事件都存放在里面?显然是不对的,那具体是什么,我们来看下面的例子。
html部分:
<div id="app">
<child
@hook:created="hookFromParent"
@hover="hoverFromParent"
:msg-from-father="msg"
:hit-from-father="hit"
>
</child>
</div>
js部分
const childComponent = Vue.component('child', {
template: '<div><p @click="showMsgFromSon">{{msgFromFather}} and {{hitFromFather}}</p></div>',
data: function () {
return {
childMsg: 'Hello, I am Child'
}
},
props: ['msgFromFather', 'hitFromFather'],
methods: {
showMsgFromSon () {
console.log('Hello Vue from son')
}
},
mounted () {
console.log('child mounted')
}
})
const app = new Vue({
el: '#app',
data: function () {
return {
msg: 'Hello Chris, I am your father',
hit: 'I will hit you if you do not study',
}
},
components: {
childComponent
},
methods: {
hoverFromParent () {
console.log('attch event')
},
hookFromParent () {
console.log('attch hook')
}
}
})
下图表示的是上述demo中vm._events属性的值
上面例子中,child组件上除了父组件绑定的方法之外,其组件内部还有showMsgFromSon和mounted钩子方法,但是这两个方法都没有出现在_events属性中。综上可知,vm._events表示的是父组件绑定在当前组件上的事件。
接下来看代码
vm._hasHookEvent = false
这行代码把我们vm实例上的_hasHookEvent属性设置为false。该属性表示父组件是否通过"@hook:"把钩子函数绑定在当前组件上。该用法可以在上个demo中找到,通过下列方式完成绑定。
@hook:钩子名称="绑定的函数"
继续回到源码中
// init parent attached events
const listeners = vm.$options._parentListeners
从英文注释中,我们知道这行代码的作用是初始化父组件添加的事件。那具体是什么意思呢?通过追踪vm.$options._parentListeners的赋值过程(这个过程有点复杂,在之后讲双向绑定和虚拟dom的时候会说到),我们知道vm.$options._parentListeners其实和上面的_events一样,都是用来表示父组件绑定在当前组件上的事件。(当然还是略有点不同,这个之后会讲解)如果存在这些绑定的事件,那么就执行下面代码
if (listeners) {
updateComponentListeners(vm, listeners)
}
如果事件存在,则调用updateComponentListeners更新这些方法。
export function updateComponentListeners (
vm: Component,
listeners: Object,
oldListeners: ?Object
) {
target = vm
updateListeners(listeners, oldListeners || {}, add, remove, vm)
target = undefined
}
来看updateComponentListeners方法的源码
target = vm
这行代码的主要作用是保留对vm实例的引用,在执行updateListeners方法时能访问到实例对象,并执行add和remove方法。
updateListeners(listeners, oldListeners || {}, add, remove, vm)
在研究updateListeners源码之前,我们先来了解一下传入的这几个参数。listeners我们前面说过,是父组件绑定在当前组件上的事件对象,oldListeners表示当前组件上旧的事件对象,vm是vue实例对象。这三个没什么好说的,我们具体来讲讲另外两个参数add和remove。
add方法
add方法源码如下:
function add (event, fn, once) {
if (once) {
target.$once(event, fn)
} else {
target.$on(event, fn)
}
}
如果第三个参数once为true,则执行vue.$once方法,否则执行vue.$on方法。我们先来看vue.$on
vue.$on方法
为什么要先讲$on方法,因为$once方法中也需要用到$on,在看$on源码之前,我们先来看看官方文档里对它的定义。
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
知道了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)
}
} else {
(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
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}
else之前的代码都很简单,先缓存this,如果传入的事件是事件数组的话,则分别对数组内的每一项调用$on绑定事件。接下来重点看看else块内的代码。
(vm._events[event] || (vm._events[event] = [])).push(fn)
我们知道_events是表示直接绑定在组件上的事件,如果是通过$on新添加的事件(也相当于直接绑定在组件上的事件),我们也要把事件和回调方法传入到_events对象中。
回到源码中
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash look
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
关于这句代码的解释,网上很多文章说的都是类似下面的话
这个bool标志位来表明是否存在钩子,而不需要通过哈希表的方法来查找是否有钩子,这样做可以减少不必要的开销,优化性能。
这句话除了是翻译原文注释之外,还存在明显的错误,这个tag不是表明是否存在钩子,而是表示是否使用下面的方式绑定钩子。
如果是下列形式绑定的钩子,则_hasHookEvent属性为true。
<child
@hook:created="hookFromParent"
>
而像下面这种形式,它也存在钩子函数,但是它的_hasHookEvent就是false。
const childComponent = Vue.component('child', {
...
created () {
console.log('child created')
}
})
所以_hasHookEvent不是表示是否存在钩子,它表示的是父组件有没有直接绑定钩子函数在当前组件上。说这么多,只是希望大家尽可能的少被误导。那么,那句注释到底是什么意思呢?我们可以从callHook的源码中来寻找答案。
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)
}
}
当前实例的钩子函数如果是通过父组件的:hook方式来指定的,那么它在执行钩子函数的回调方法时就是直接触发vm.$emit来执行。(这种方式类似于dom中的addEventListener监听事件和dispatchEvent触发事件)
如果不是上面这种方法指定的钩子函数,就需要执行callhook源码上半部分的代码逻辑。找到vm实例上的钩子函数,然后执行绑定在它上面的回调。至于执行效率的问题,没有去研究过,但是原文注释里都说了是优化钩子,那么证明第一种方法执行效率应该是优于第二种方法。
我们回到$on的源码中,最后是返回vm实例对象。
return vm
现在我们知道了vm.$on方法主要就是把传入的方法给push到_events属性里,方便之后被$emit调用。
vm.$once
讲过了vm.$on的主要作用之后,我们接着来分析vm.$once的源码,先看文档中关于vm.$once的定义。
监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。
了解了vm.$once的定义之后,我们再来看源码
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
}
结合上面的定义和之前讲的vm.$on方法,我们应该比较容易理解解$once了,它和$on方法的核心区别主要在on方法
function on () {
vm.$off(event, on)
fn.apply(vm, arguments)
}
on方法包装了event的回调事件,这是on和once最本质的区别,当触发once绑定的回调时候,执行on方法,先调用$off方法(这个方法是移除监听的方法,我们待会儿就会讲)移除监听,然后再执行回调函数。这样就实现了只触发一次的功能,讲到这里,add方法中所有的内容就已经讲完了。
由于文章篇幅的原因,其他关于initEvents的内容我们下篇文章继续讲,主要有$off,$emit和updateListeners相关的实现。敬请期待。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。