Vue template 到 render 的过程

过程分析

Vue的模版编译过程主要如下：template->ast->render函数。

Vue在模版编译中会执行compileToFunctions将template转化为render函数。

// 将模版编译为render函数
const { render, staticRenderFns } = compileToFunctions(template, options, this)
复制代码

1.调用parse方法将template转化为ast（抽象语法树）

const ast = parse(template.trim(), options)
复制代码

parse的目标：是把template转化为AST，它是一种用JavaScript对象形式来描述整个模版的语法结构。

解析过程：利用正则表达式来解析模版，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造AST树的目的。

AST元素节点总共三种类型：type为1表示普通元素、2为表达式、3为纯文本。

2.对静态节点做优化

optimize(ast, options)
复制代码

这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化。

深度遍历AST：查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点，他们生成的DOM永远不会改变，这对运行时的模版更新起到了极大的优化作用。

3.生成代码

const code = generate(ast, options)
复制代码

generate将ast抽象语法树编译成render字符串并将静态部分放到staticRenderFns中，最后通过new Function(render)生成render函数。