首页>>前端>>Vue->Vue 源码编译思想之parse那些事

Vue 源码编译思想之parse那些事

时间:2023-11-29 本站 点击:1

楔子

笔者公司的前端小组掀起了Vue源码学习小组,前后几个月的共同学习,让小组成员都已经对Vue对大致框架有了个模糊对轮廓。 现在已经进入第二阶段:整理。

我们将小组分为四个部分,vue对整理也分为三个大模块:数据绑定、从template到vnode、vnode转化为dom对patch。

笔者对小组被分到了template到vnode对部分,拿到手后,感觉内容比较多,就先将内容根据源码对布局分为两小块:parse 和 render过程。

再者,古人云:兵马未动,粮草先行。笔者打算先介绍思想和思路,然后在具体到一些细枝末节。

本文准备到就是parse部分思想。

正文

一、整个编译过程的目的

我们都知道使用vue到时候,我们使用定制样式到几种方式大致为:

1.options template。

2.el。(挂载的节点)

3.render 方法。

我们需要明白到是无论是哪种方式,我们最终的目的都是 生成以vnode为单位vdom树

而生成的vdom树,最终是用于patch过程中,生成真实dom节点。

所以我们的编译的最终目的是获得:

Virtue dom

形式大致如下图:

暂时不用管每个属性的作用,我们已经知道我们的目标是怎样的了。那么还需要知道的是 起始点和过程。

正常情况下,如果我们这样初始化的话:

newVue({el:'#el',template:`<div><divv-for="(item,index)inoptions":key="item.id">{{item.id}}<div>{{item.text}}</div></div></div>`,data:{name:"dinglei",options:[{id:1,text:'Hello'},{id:2,text:'World'}]}})

那我们的初始化的状态则是 template的 一串 String。

当然初始化为String的写法还是满多的。 比如:

不传template,直接使用使用$el。

template,使用一个模版。

所以我们从的转换过程,就是从 一串String的模版virtue dom tree的过程。

但是值得一提的是,vue 从模版到vdom的过程并非是直接一次性到位的过程。可能是因为尤大的设计的vnode和原生的dom属性差距过大,直接编译成vnode不好完成。其次是考虑到性能优化等方面。

所以vue的编译过程其实是分为三个过程:

parse

optimize

codegen for render And render

分别对应三个过程:

从模版到 astElement

在astElement的基础上优化添加标记staticRoot,当然这个层面的static标记最后是用于第三步codegen里面的。

codegen 生成 render函数,render 绑定实例后,再进行执行 就可以得到vnode的树。

流程大致如下图:

接下来我们将进入本文的主题

二、parse、optimize、codegen的核心思想解读。

1)parse解读

首先需要明白astElement包括哪些属性。在vue源码 flow文件目录下的compiler.js可以找到astElement的模型

declaretypeASTElement={type:1;tag:string;attrsList:Array<ASTAttr>;attrsMap:{[key:string]:any};rawAttrsMap:{[key:string]:ASTAttr};parent:ASTElement|void;children:Array<ASTNode>;start?:number;end?:number;processed?:true;static?:boolean;staticRoot?:boolean;staticInFor?:boolean;staticProcessed?:boolean;hasBindings?:boolean;text?:string;attrs?:Array<ASTAttr>;dynamicAttrs?:Array<ASTAttr>;props?:Array<ASTAttr>;plain?:boolean;pre?:true;ns?:string;component?:string;inlineTemplate?:true;transitionMode?:string|null;slotName?:?string;slotTarget?:?string;slotTargetDynamic?:boolean;slotScope?:?string;scopedSlots?:{[name:string]:ASTElement};ref?:string;refInFor?:boolean;if?:string;ifProcessed?:boolean;elseif?:string;else?:true;ifConditions?:ASTIfConditions;for?:string;forProcessed?:boolean;key?:string;alias?:string;iterator1?:string;iterator2?:string;staticClass?:string;classBinding?:string;staticStyle?:string;styleBinding?:string;events?:ASTElementHandlers;nativeEvents?:ASTElementHandlers;transition?:string|true;transitionOnAppear?:boolean;model?:{value:string;callback:string;expression:string;};directives?:Array<ASTDirective>;forbidden?:true;once?:true;onceProcessed?:boolean;wrapData?:(code:string)=>string;wrapListeners?:(code:string)=>string;//2.4ssroptimizationssrOptimizability?:number;//weexspecificappendAsTree?:boolean;};

在开始讲流程之前,先列出整个流程会出现的重要的角色。下面的流程和流程图都是以此为基础的。

角色

识别器(parseHTML) (1)

存储栈(stack) (2)

创建函数(createASTElement) (3)

上下文(currentParent)(4)

开始处理函数start (5)

结束处理函数end (6)

整体工作流程大致如下:

1.就是识别器(1)利用正则从前到后识别所有敏感字段。如(标签、事件、迭代、数据绑定、插槽等等)

2.开始标签 例如<div>{{test}}</div>里的<div>,识别器(1)一旦识别到此类标签,就会使用开始函数start (5)来对开始标签做统一处理,而start函数 会创建一个astElement并 存放到stack当中,当时创建的方式是利用创建函数(3)创建的,同时也会处理一些非组件属性(具体如v-model、v-if、v-for)。这里需要注意的是:

1.一元标签如:img等,会直接走3处理。

p标签会做特殊处理,目的是为了和浏览器等识别方式达到目标一致。具体点击此处

3.识别到闭合标签,则会转交给end函数来处理,end函数 会摘取原生属性如:id 、 class等等、还有ref、slot、component、key等等,并跟上下文(4)建立起父子关系。最终形成了树的结构。

4.一直重复 1~3直到stack没有任何标签。

流程图大致如下:

其中的细节特别多,如果有兴趣请关注我们的动态,我们会在下期给出详细过程讲解。 点击这里了解更多

2) optimize思想解读。

我们在上面已经给出了astElement的详细属性,其中有两个属性叫做staticRoot 和 staticInFor。而optimize 的过程,就是给astElement打上这两个标记。这里是为了让这类静态节点,在render过程,能够走缓存的方式,只渲染一次。

好处很明显,就是静态节点不需要重复对比和 重新渲染,以此来提高整体性能。

3)code generate解读

这个过程其实还没有生成vnode,而是生成一个执行函数,且包含了this的执行code,其格式如下:

with(this){_c('div'...xxx...xxx)}

我们在强调下,这次又是从astElement直接到另一个String。 上面astElement是个树状结构。

然后在这个过程,基本一个astElement就对应一个短函数。 最基本短函数是createElement 也就是_c。 最终的树状结构,会以函数的形式表现处理函数如下:

_c('div',{key:'xxx',ref:'xx',pre:'xxx',domPro:xxx,....},[//chidren_v(_s('ding')),_c('p',{model:'isshow',},[...xxx])])

可以清晰的看到,最终形成的string,依然是一个树状形式,是以function形式展示的树状,而且所有属性都已经抽离成createElement的第二个参数。

这里对短函数做个简单的说明:

1.短函数最终执行短this其实就是Vue实例,或者组件实例。

2.短函数比较重要的三个创建函数分别是_c(createElement)、_v(createTextVNode)、_e(createEmptyVNode),分别生成三种类型的vnode。

一句话概括下code generate做的事情就是:

生成vnode的前置工作,抽离astElement所有的属性,形成短函数链。

短函数对应大致如下:

exportfunctioninstallRenderHelpers(target:any){target._o=markOnce//v-oncetarget._n=toNumbertarget._s=toStringtarget._l=renderList//v-fortarget._t=renderSlot//slottarget._q=looseEqualtarget._i=looseIndexOftarget._m=renderStatic//statictarget._f=resolveFiltertarget._k=checkKeyCodestarget._b=bindObjectPropstarget._v=createTextVNodetarget._e=createEmptyVNodetarget._u=resolveScopedSlots//scopeSlottarget._g=bindObjectListeners//linsnerstarget._d=bindDynamicKeystarget._p=prependModifier}

4) render 函数。

这个过程是直接执行,就会得到以vnode为节点对虚拟dom树,其细节包括了component的处理,会有单独一节去介绍。 最后这些虚拟树会丢给patch函数,最终在不断对比对过程中生成目标真实对dom树。 这里展示下vnode的格式。

declareinterfaceVNodeData{key?:string|number;slot?:string;ref?:string;is?:string;pre?:boolean;tag?:string;staticClass?:string;class?:any;staticStyle?:{[key:string]:any};style?:string|Array<Object>|Object;normalizedStyle?:Object;props?:{[key:string]:any};attrs?:{[key:string]:string};domProps?:{[key:string]:any};hook?:{[key:string]:Function};on?:?{[key:string]:Function|Array<Function>};nativeOn?:{[key:string]:Function|Array<Function>};transition?:Object;show?:boolean;//markerforv-showinlineTemplate?:{render:Function;staticRenderFns:Array<Function>;};directives?:Array<VNodeDirective>;keepAlive?:boolean;scopedSlots?:{[key:string]:Function};model?:{value:any;callback:Function;};};

总结

1.编译四大过程parse、optimize、codegen、render。

2.用户自定义的render其实是忽略了前面三个步骤,直接定制的方式。

3.vdom 最终是以vnode为节点的树状结构,在patch过程,会以新老vdom进行对比,来决定哪些dom是需要更新或添加、删除的。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/836.html