petite-vue源码分析——事件绑定`v-on`Unbind的工作原理。忘记过去通过jQuery的繁琐。事件绑定是petite-vue中的一个指令，类似于其他指令。深入v-on的工作原理walk方法在解析模板时会遍历元素的特征集合el.attributes。当属性名匹配到v-on或@时，属性名和属性值将被推到延迟队列的末尾。在当前元素的所有属性绑定和v-modal处理和子元素的所有属性绑定、v-modal和事件绑定处理之后。那么问题来了，为什么要在最后处理事件绑定呢？//文件./src/on.tsconstsystemModifiers=['ctrl','shift','alt','meta']constmodifiersGuards:Record)=>无效|boolean>={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!(e作为KeyedEvent).ctrlKey,shift:e=>!(easKeyedEvent).shiftKey,alt:e=>!(easKeyedEvent).altKey,meta:e=>!(easKeyedEvent).metaKey,左：e=>'button'ine&&(easMouseEvent).button!==0,middle:e=>'button'ine&&(easMouseEvent).button!==1,right:e=>'button'ine&&(easMouseEvent).button!==2,/*@click.alt.shift将分别匹配alt和shift的两个修饰符守卫。此时按下alt+shift+ctrl时，两个修饰符守卫都通过了。*@click.alt.shift.exact将分别匹配alt、shift和exact。此时按下alt+shift+ctrl时，前两个修饰符guard会pass，但最后一个exactguard会返回true，事件不会执行回调。*/exact:(e,modifiers)=>systemModifiers.some(m=>(easany)[`${m}Key`]&&!modifiers[m])}exportconston:Directive({el,get,exp,arg,修饰符})=>{lethandler=simplePathRE.test(exp)?get(`(e=>${exp}(e)`):get(`($event=>{${exp}})`)if(arg==='vue:mounted'){//如果生命周期函数mounted是绑定的，但是由于当前元素已经添加到DOM树中，所以该函数被推入微队列执行nextTick(handler)return}elseif(arg==='vue:unmounted'){//如果绑定了生命周期函数unmounted，返回清理函数return()=>handler()}if(modifiers){//如果有修饰符，增强事件绑定if(arg==='click'){//@click.right对应的DOM事件是contextmenuif(modifiers.right)arg='contextmenu'//@click.middle对应的DOM事件是mouseupif(modifiers.middle)arg='mouseup'}constraw=hanlderhandler=(e:Event)=>{if('key'ine&&!(hyphenate((easKeyboardEvent).key)inmodifiers)){/*如果是键盘事件，则键未在修饰符中指定执行事件回调函数*Thekeyvalueisa,b,CapsLock等hyphenate将CapsLock转为caps-lock*/return}for(constkeyinmodifiers){//执行修饰符对应的逻辑，如果为true返回，事件不会被执行Callbackfunctionconstguard=modiferGuards[key]if(guard&&guard(e,modifiers)){return}returnraw(e)}}}//没有返回清理函数？？大家可以贡献代码哈哈listen(el,arg,handler,modifers)}//file./src/utils.tsexportconstlisten=(el:Element,event:string,handler:any,options?:any)=>{el.addEventListener(event,handler,options)}总结既然我们已经了解了v-bind和v-on的工作原理，那么我们稍后再看一下v-modal！《Petite-Vue源码剖析》小册子《Petite-Vue源码剖析》结合实例，从在线渲染、响应式系统、沙箱模型逐行解读源码。并对响应式系统中使用JS引擎的SMI优化依赖清理算法进行了详细分析。绝对是入门Vue3源码前的绝佳敲门砖，喜欢的话记得转发点赞哦！
