Vue事件机制API

初始化事件在vm上创建一个_events对象，用来存放事件。_events的内容如下：

{eventName:[func1,func,func3]}

存放事件名以及对应执行方法。

/*初始化事件*/exportfunctioninitEvents(vm:Component){/*在vm上创建一个_events对象，用来存放事件。*/vm._events=Object.cate(null)/*这个bool标志位来表明是否存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。*/vm._hasHookEvent=false//initpantattachedevents/*初始化父组件attach的事件*/constlisteners=vm.$options._pantListenersif(listeners){updateComponentListeners(vm,listeners)}}

$on方法用来在vm实例上监听一个自定义事件，该事件可用$emit触发。

Vue.prototype.$on=function(event:string

Arraystring,fn:Function):Component{constvm:Component=this/*如果是数组的时候，则递归$on，为每一个成员都绑定上方法*/if(Array.isArray(event)){for(leti=0,l=event.length;il;i++){this.$on(event[i],fn)}}else{(vm._events[event]

(vm._events[event]=[])).push(fn)//optimizehook:eventcostbyusingabooleanflagmarkedatgistration//insteadofahashlookup/*这里在注册事件的时候标记bool值也就是个标志位来表明存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。*/if(hookRE.test(event)){vm._hasHookEvent=true}}turnvm}

$once监听一个只能触发一次的事件，在触发以后会自动移除该事件。

Vue.prototype.$once=function(event:string,fn:Function):Component{constvm:Component=thisfunctionon(){/*在第一次执行的时候将该事件销毁*/vm.$off(event,on)/*执行注册的方法*/fn.apply(vm,arguments)}on.fn=fnvm.$on(event,on)turnvm}

$off用来移除自定义事件

Arraystring,fn?:Function):Component{constvm:Component=this//all/*如果不传参数则注销所有事件*/if(!arguments.length){vm._events=Object.cate(null)turnvm}//arrayofevents/*如果event是数组则递归注销事件*/if(Array.isArray(event)){for(leti=0,l=event.length;il;i++){this.$off(event[i],fn)}turnvm}//specificeventconstcbs=vm._events[event]/*Github:

转载请注明：http://www.aierlanlan.com/tzrz/5899.html