Vue template 到 render 都做了哪些事情

vue的模板编译过程主要如下：template -> ast -> render函数

vue会在模板编译的时候执行 compileToFunctions 将template转化为render函数

// 将模板编译为render函数
const { render, staticRenderFns } = compileToFunctions(template,options//省略}, this)

compileToFunctions中主要作用如下：

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

const ast = parse(template.trim(), options)

• parse的目标：把template转换成ast树，它是一种js对象的形式来描述整个模板。
• 解析过程：利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候，都会分别执行对应的回调函数，来达到构造ast树的目的

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

（2）对静态节点做优化

optimize(ast, options)

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

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

（3）生成代码

const code = generate(ast, options)

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