楔子

笔者公司的前端小组掀起了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是需要更新或添加、删除的。