0%

Vue2.x的编译过程

编译过程

主要三个步骤:parse -> optimize -> codegen。

将模版template经过上面三个步骤,编译成render函数。

parse

parse方法对模版做解析生成AST抽象语法树,AST是源代码抽象语法结构的树状表示,可以简单理解为是将源代码按照一定规则转换成一种树状结构。

解析HTML模版的时候,使用正则做各种匹配,如注释节点、文档类型节点、开始标签、结束标签等,对于不同情况进行不同的处理,直到整个template被解析完成。

在处理标签的时候为每一个标签创建了一个AST元素,建立起父子关系生成AST树。AST元素节点一共有3种类型,type为1表示是普通类型,为2表示表达式,为3表示纯文本。

⚠️ 在parse过程中,还完成了对指令的解析。

optimize

optimize做的事情就是优化AST树。

由于Vue是响应式的,但是模板中并不是所有的数据都是响应式的,很多数据是首次渲染后就永远不会变化,可以在编译阶段将一些AST节点优化成静态节点,可以在数据更新patch的时候跳过这些节点的比对,提高渲染速度。

整个optimize过程中就干了两件事情:

  1. 标记静态节点
  2. 标记静态根

codegen

优化后的AST抽象语法树通过generate函数生成render函数字符串。在compileToFunctions中,会将这个render函数字符串转换成函数。