Vue实例方法之事件的实现
2018.05.15 16:24 772浏览
开始
这段时间一直在看vue的源码,源码非常多和杂,所以自己结合资料和理解理出了一个主线,然后根据主线去剥离其他的一些知识点,然后将各个知识点逐一学习。这里主要是分析的事件系统的实现。
正文
一、了解使用方式
在分析之前先了解下几个api的使用方式:
vm.$on(event, callback)
-
参数:
-
{string | Array<string>} event
(数组只在 2.2.0+ 中支持) -
{Function} callback
-
-
用法:
$on
事件需要两个参数,一个是监听的当前实例上的事件名,一个是事件触发的回调函数,回调函数接受的是在事件出发的时候额外传递的参数。 -
例子:
vm.$on('test', function (msg) { console.log(msg) }) vm.$emit('test', 'hi')// => "hi"
vm.$once(event, callback)
$once
事件整体上来说和$on
事件的使用方式差不多,但是event只支持字符串也就是说只支持单个事件。并且该事件再触发一次后就移除了监听器。
-
例子
vm.$once('testonce', function (msg) { console.log(msg) })
vm.$off([event, callback])
-
参数:
-
{string | Array<string>} event(仅在 2.2.2+ 支持数组)
-
{Function} [callback]
-
-
用法:移除自定义事件监听器
-
如果没有提供参数,则移除所有的事件监听器
-
如果只提供了事件,则移除该事件所有的监听器;
-
如果同时提供了事件与回调,则只移除这个回调的监听器。
-
-
例子:
vm.$off() vm.$off('test') vm.$off('test1', function (msg) { console.log(msg) }) vm.$off(['test1','test2'], function (msg) { console.log(msg) })
vm.$emit(event, [..args])
-
参数:
-
{string} event
要触发的事件名 -
[...args]
可选
-
-
用法:
触发当前实例上的事件。附加参数都会传给监听器回调。
-
例子
vm.$emit('test', '触发自定义事件')
二、源码分析
事件的初始化工作
我们在使用自定义事件的api的时候,肯定有个地方是需要来存我们的事件和回调的地方。在vue
中大部分的初始化工作都是在core/instance/init.js
的initMixin
方法中。所以我们能够在initMixin
看到initEvents
方法。
// initEventsexport 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) } }
上面的代码可以看到,在初始化Vue
事件的时候,在vm
实例上面挂载了一个_events
的空对象。后面我们自己调用的自定义事件都存在里面。
因为vue本身在组件嵌套的时候就有子组件使用父组件的事件的时候。所以就可以通过updateComponentListeners
方法把父组件事件监听器(比如click)传递给子组件。(这里不做过多讨论)
自定义事件的挂载方式
自定义事件的挂载是在eventsMixin
方法中实现的。这里面将四个方法挂在Vue的原型上面。
Vue.prototype.$on Vue.prototype.$once Vue.prototype.$off Vue.prototype.$emit
Vue.prototype.$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 }
第一个参数就是自定义事件,因为可能是数组,所以判断如果是数组,那么就循环调用this.$on
方法。
如果不是数组,那么就直接向最开始定义的_events
对象集合里面添加自定义事件。
所以这个时候_events
对象生成的格式大概就是下面:
vm._events={ 'test':[fn,fn...], 'test1':[fn,fn...] }
Vue.prototype.$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 }
这里定义了一个on
函数。接着把fn
赋值给on.fn
。最后在调用的是vm.$on
。这里传入的就是事件名和前面定义的on
函数。on
函数在执行的时候会先移除_events
中对应的事件,然后调用fn
所以分析下得到的是:
vm._events={ 'oncetest':[ function on(){ vm.$off(event,on) fn.apply(vm,arguments) } , ... ] }
Vue.prototype.$off的实现
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component { const vm: Component = this // all // 如果没有传任何参数的时候,直接清楚所有挂在_events对象上的所有事件。 if (!arguments.length) { vm._events = Object.create(null) return vm } // array of events // 如果第一个参数是数组的话,那么就循环调用this.$off方法 if (Array.isArray(event)) { for (let i = 0, l = event.length; i < l; i++) { this.$off(event[i], fn) } return vm } // specific event // 获取对应事件所有的回调可能是个数组 const cbs = vm._events[event] // 没有相关的事件的时候直接返回vm实例 if (!cbs) { return vm } // 如果只传入了事件名,那么清除该事件名下所有的事件。 也就是说 vm._events = {'test': null, ...} if (!fn) { vm._events[event] = null return vm } // 如果传入的第二个参数为真,那么就去cbs里面遍历,在cbs中找到和fn相等的函数,然后通过splice删除该函数。 if (fn) { // specific 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 的实现
Vue.prototype.$emit = function (event: string): Component { const vm: Component = this if (process.env.NODE_ENV !== 'production') { const lowerCaseEvent = event.toLowerCase() 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}".` ) } } // 匹配到事件列表,该列表是一个json。 let cbs = vm._events[event] if (cbs) { //将该json转化成为真正的数组 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 }
上面主要意思是:匹配到json中相关key值的value,这个value先转换成真正的数组,再循环遍历数组,传入给的参数执行数组中的每个函数
最后
vue中的自定义事件主要目的是为了组件之间的通信。因为_events
对象是挂在Vue实例上的。因此每个组件是都可以访问到vm._events
的值的,也能够向其中push
值的。
整个自定义事件系统呢就是在vm实例上挂载一个_events的对象,可以理解为一个json,其中json的key值就是自定义事件的名称,一个key值可能对应着多个自定义事件,因此json中每个key对应的value都是一个数组,每次执行事件监听都会向数组中push相关的函数,最终通过$emit函数传入的参数,匹配到json中相应的key,val值,从而使用给定的参数执行数组中的函数。
最后的_events
对象:
vm._events={ 'test1':[fn,fn,fn], 'test2':[fn], 'oncetest':[ function on(){ vm.$off(event,on) fn.apply(vm,arguments) }, ... ], ... }
作者:Charming
来源:https://segmentfault.com/a/1190000014838345?utm_source=channel-hottest