好资源导航 » 文章资讯 » vue源码解析之事件机制原理

vue源码解析之事件机制原理

2023-09-13 21:51:05 50

上一章没什么经验。直接写了组件机制。感觉涉及到的东西非常的多，不是很方便讲。今天看了下vue的关于事件的机制。有一些些体会。写出来。大家一起纠正，分享。源码都是基于最新的Vue.jsv2.3.0。下面我们来看看vue中的事件机制：
老样子还是先上一段贯穿全局的代码，常见的事件机制demo都会包含在这段代码中：


click1

click2

varChild={ template:'

Acustomcomponent!

' } Vue.component('my-component',{ name:'my-component', template:'

Acustomcomponent!testclick

', components:{ Child:Child }, created(){ console.log(this); }, methods:{ toParent(){ this.$emit('componenton','toParent') } }, mounted(){ console.log(this); } }) newVue({ el:'#app', data:function(){ return{ heihei:{name:3333}, a:1 } }, components:{ Child:Child }, methods:{ click1(){ alert('click1') }, click2(){ alert('click2') }, nativeclick(){ alert('nativeclick') }, parentOn(value){ alert(value) } } })

上面的demo中一共有四个事件。基本涵盖了vue中最经典的事件的四种情况

普通html元素上的事件

好吧。想想我们还是一个个来看。如果懂vue组件相关的机制会更容易懂。那么首先我们看看最简单的第一、二个(两个事件只差了个修饰符)：

click1

这是简单到不能在简单的一个点击事件。

我们来看看建立这么一个简单的点击事件，vue中发生了什么。

1:newVue()中调用了initState(vue):看代码

functioninitState(vm){
vm._watchers=[];
varopts=vm.$options;
if(opts.props){initProps(vm,opts.props);}
if(opts.methods){initMethods(vm,opts.methods);}//初始化事件
if(opts.data){
initData(vm);
}else{
observe(vm._data={},true/*asRootData*/);
}
if(opts.computed){initComputed(vm,opts.computed);}
if(opts.watch){initWatch(vm,opts.watch);}
}

//接着看看initMethods
functioninitMethods(vm,methods){
varprops=vm.$options.props;
for(varkeyinmethods){
vm[key]=methods[key]==null?noop:bind(methods[key],vm);//调用了bind方法，我们再看看bind
{
if(methods[key]==null){
warn(
"method\""+key+"\"hasanundefinedvalueinthecomponentdefinition."+
"Didyoureferencethefunctioncorrectly?",
vm
);
}
if(props&&hasOwn(props,key)){
warn(
("method\""+key+"\"hasalreadybeendefinedasaprop."),
vm
);
}
}
}
}

//我们接着看看bind

functionbind(fn,ctx){
functionboundFn(a){
varl=arguments.length;
returnl
?l>1
?fn.apply(ctx,arguments)//通过返回函数修饰了事件的回调函数。绑定了事件回调函数的this。并且让参数自定义。更加的灵活
:fn.call(ctx,a)
:fn.call(ctx)
}
//recordoriginalfnlength
boundFn._length=fn.length;
returnboundFn
}

总的来说。vue初始化的时候，将method中的方法代理到vue[key]的同时修饰了事件的回调函数。绑定了作用域。

2:vue进入compile环节需要将该div变成ast(抽象语法树）。当编译到该div时经过核心函数genHandler：

functiongenHandler(
name,
handler
){
if(!handler){
return'function(){}'
}

if(Array.isArray(handler)){
return("["+(handler.map(function(handler){returngenHandler(name,handler);}).join(','))+"]")
}

varisMethodPath=simplePathRE.test(handler.value);
varisFunctionExpression=fnExpRE.test(handler.value);

if(!handler.modifiers){
returnisMethodPath||isFunctionExpression//假如没有修饰符。直接返回回调函数
?handler.value
:("function($event){"+(handler.value)+"}")//inlinestatement
}else{
varcode='';
vargenModifierCode='';
varkeys=[];
for(varkeyinhandler.modifiers){
if(modifierCode[key]){
genModifierCode+=modifierCode[key];//处理修饰符数组，例如.stop就在回调函数里加入event.stopPropagation()再返回。实现修饰的目的
//left/right
if(keyCodes[key]){
keys.push(key);
}
}else{
keys.push(key);
}
}
if(keys.length){
code+=genKeyFilter(keys);
}
//Makesuremodifierslikepreventandstopgetexecutedafterkeyfiltering
if(genModifierCode){
code+=genModifierCode;
}
varhandlerCode=isMethodPath
?handler.value+'($event)'
:isFunctionExpression
?("("+(handler.value)+")($event)")
:handler.value;
return("function($event){"+code+handlerCode+"}")
}
}

genHandler函数简单明了，如果事件函数有修饰符。就处理完修饰符，添加修饰符对应的函数语句。再返回。这个过程还会单独对native修饰符做特殊处理。这个等会说。compile完后自然就render。我们看看render函数中这块区域长什么样子：


_c('div',{attrs:{"id":"test1"},on:{"click":click1}},[_v("click1")]),_v(""),_c('div',{attrs:{"id":"test2"},on:{"click":function($event){$event.stopPropagation();click2($event)}}}

一目了然。最后在虚拟dom－》真实dom的时候。会调用核心函数：

functionadd$1(
event,
handler,
once$$1,
capture,
passive
){
if(once$$1){
varoldHandler=handler;
var_target=target$1;//savecurrenttargetelementinclosure
handler=function(ev){
varres=arguments.length===1
?oldHandler(ev)
:oldHandler.apply(null,arguments);
if(res!==null){
remove$2(event,handler,capture,_target);
}
};
}
target$1.addEventListener(
event,
handler,
supportsPassive
?{capture:capture,passive:passive}//此处绑定点击事件
:capture
);
}

组件上的事件

好了下面就是接下来的组件上的点击事件了。可以预感到他走的和普通的html元素应该是不同的道路。事实也是如此：

最简单的一个例子。两个事件的区别就是一个有.native的修饰符。我们来看看官方.native的作用：在原生dom上绑定事件。好吧。很简单。我们跟随源码看看有何不同。这里可以往回看看我少的可怜的上一章组件机制。vue中的组件都是扩展的vue的一个新实例。在compile结束的时候你还是可以发现他也是类似的一个样子。如下图：

_c('my-component',{on:{"componenton":parentOn},nativeOn:{"click":function($event){nativeclick($event)}}

可以看到加了.native修饰符的会被放入nativeOn的数组中。等待后续特殊处理。等不及了。我们直接来看看特殊处理。render函数在执行时。如果遇到组件。看过上一章的可以知道。会执行

functioncreateComponent(
Ctor,
data,
context,
children,
tag
){
if(isUndef(Ctor)){
return
}

varbaseCtor=context.$options._base;

//plainoptionsobject:turnitintoaconstructor
if(isObject(Ctor)){
Ctor=baseCtor.extend(Ctor);
}

//ifatthisstageit'snotaconstructororanasynccomponentfactory,
//reject.
if(typeofCtor!=='function'){
{
warn(("InvalidComponentdefinition:"+(String(Ctor))),context);
}
return
}

//asynccomponent
if(isUndef(Ctor.cid)){
Ctor=resolveAsyncComponent(Ctor,baseCtor,context);
if(Ctor===undefined){
//returnnothingifthisisindeedanasynccomponent
//waitforthecallbacktotriggerparentupdate.
return
}
}

//resolveconstructoroptionsincaseglobalmixinsareappliedafter
//componentconstructorcreation
resolveConstructorOptions(Ctor);

data=data||{};

//transformcomponentv-modeldataintoprops&events
if(isDef(data.model)){
transformModel(Ctor.options,data);
}

//extractprops
varpropsData=extractPropsFromVNodeData(data,Ctor,tag);

//functionalcomponent
if(isTrue(Ctor.options.functional)){
returncreateFunctionalComponent(Ctor,propsData,data,context,children)
}

//extractlisteners,sincetheseneedstobetreatedas
//childcomponentlistenersinsteadofDOMlisteners
varlisteners=data.on;//listeners缓存data.on的函数。这里就是componenton事件
//replacewithlistenerswith.nativemodifier
data.on=data.nativeOn;//正常的data.on会被native修饰符的事件所替换

if(isTrue(Ctor.options.abstract)){
//abstractcomponentsdonotkeepanything
//otherthanprops&listeners
data={};
}

//mergecomponentmanagementhooksontotheplaceholdernode
mergeHooks(data);

//returnaplaceholdervnode
varname=Ctor.options.name||tag;
varvnode=newVNode(
("vue-component-"+(Ctor.cid)+(name?("-"+name):'')),
data,undefined,undefined,undefined,context,
{Ctor:Ctor,propsData:propsData,listeners:listeners,tag:tag,children:children}
);
returnvnode
}

整段代码关于事件核心操作：

varlisteners=data.on;//listeners缓存data.on的函数。这里就是componenton事件
//replacewithlistenerswith.nativemodifier
data.on=data.nativeOn;//正常的data.on会被native修饰符的事件所替换

经过这两句话。.native修饰符的事件会被放在data.on上面。接下来data.on上的事件（这里就是nativeclick）会按普通的html事件往下走。最后执行target.add('',''')挂上原生的事件。而先前的data.on上的被缓存在listeneners的事件就没着么愉快了。接下来他会在组件init的时候。它会进入一下分支：

functioninitEvents(vm){
vm._events=Object.create(null);
vm._hasHookEvent=false;
//initparentattachedevents
varlisteners=vm.$options._parentListeners;
if(listeners){
updateComponentListeners(vm,listeners);
}
}

functionupdateComponentListeners(
vm,
listeners,
oldListeners
){
target=vm;
updateListeners(listeners,oldListeners||{},add,remove$1,vm);
}

functionadd(event,fn,once$$1){
if(once$$1){
target.$once(event,fn);
}else{
target.$on(event,fn);
}
}

发现组件上的没有.native的修饰符调用的是$on方法。这个好熟悉。进入到$on,$emit大致想到是一个典型的观察者模式的事件。看看相关$on,$emit代码。我加点注解：

Vue.prototype.$on=function(event,fn){
varthis$1=this;

varvm=this;
if(Array.isArray(event)){
for(vari=0,l=event.length;i1?toArray(cbs):cbs;
varargs=toArray(arguments,1);
for(vari=0,l=cbs.length;i
看了上面的on,emit用法下面这个demo也就瞬间秒解了（一个经常用的非父子组件通信）：
varbus=newVue()
//触发组件A中的事件
bus.$emit('id-selected',1)
//在组件B创建的钩子中监听事件
bus.$on('id-selected',function(id){
//...
})

是不是豁然开朗。
又到了愉快的总结时间了。segementfault的编辑器真难用。内容多就卡。哎。烦。卡的时间够看好多肥皂剧了。


总的来说。vue对于事件有两个底层的处理逻辑。


1:普通html元素和在组件上挂了.native修饰符的事件。最终EventTarget.addEventListener()挂载事件


2:组件上的，vue实例上的事件会调用原型上的$on,$emit（包括一些其他api$off,$once等等）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
                
            
              
            
                                    上一篇
PHP排序算法之基数排序(Radix Sort)实例详解
                
                                    下一篇
Laravel模型间关系设置分表的方法示例
                            
            
            
                     
                热门推荐 
                                        1 毛坯房验收经验和常识 看了之后再验房心里有底  
                                        2 二手房收房如何交接 二手房收房注意问题  
                                        3 专业验收毛坯房的价格 商品房验收合格的标准  
                                        4 精装房怎么验收 精装房请验房师有用吗  
                                        5 一般要到哪里找验房师 验房师有哪些作用呢  
                                        6 请人验房一般是多少钱 验房师费用是多少  
                                        7 怎样测量房子面积 建筑面积和使用面积怎么算  
                                        8 收房需要注意什么 仔细检查不松懈  
                                        9 收房时三书一证一表是什么 主要作用介绍  
                                        10 交房时交房税费有哪些 本文为你一一讲解  
                                        11 验房都需要验什么 要做哪些准备呢  
                                        12 毛坯房验房师有必要请吗 毛坯房装修完如何验收  
                                        13 地下室防水工程质量验收规范详解  
                                        14 水性涂料、油性涂料区别介绍  
                                        15 零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包  
                                        16 三棵树漆怎么样？三棵树漆官方网站  
                                        17 家庭“装修套餐”中猫腻你知道吗？  
                                        18 小空间大浴望 卫浴间装修巧支招  
                     
            
            
                
                
                
            
        
        
        
            
                随机推荐
                
                                            
                            在线所见即所得HTML编辑器的实现原理浅析
                        
                                            
                            安装Python的web.py框架并从hello world开始编程
                        
                                            
                            JavaScript获取DOM元素的11种方法总结
                        
                                            
                            从零开始搭建MySQL MMM架构
                        
                                            
                            js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
                        
                                            
                            使用Python发送邮件附件以定时备份MySQL的教程
                        
                                            
                            VC++植物大战僵尸中文版修改器实现代码
                        
                                            
                            使用Python的Tornado框架实现一个一对一聊天的程序
                        
                                            
                            C++映像劫持后门实例分析
                        
                                            
                            Shell脚本一次读取文件中一行的2种写法
                        
                                            
                            Android中捕获全局异常实现代码
                        
                                            
                            js上传图片及预览功能实例分析
                        
                                            
                            Android中监听短信的两种方法
                        
                                            
                            javascript实现的右下角弹窗实例
                        
                                            
                            JavaScript实现多个重叠层点击切换效果的方法
                        
                                            
                            jQuery中next方法用法实例
                        
                                    
            
            

                 
                
                
            
        
    



    
        
        返回顶部
    
    
        
            
            514930285
        
    
    
        
            
            czq8825@qq.com
        
    




    免责声明：网站资源来源于网络，如有侵权，请及时联系删除。
    Copyright © 2024 好资源导航网. All Rights Reserved.
    
        蜀ICP备2021004611号-4
        网站地图