Vue template到render的过程

过程分析

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

vue在模板编译版本的源码中会执行compileToFunctions将template转化为render函数

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

compileToFunctions中的主要逻辑如下：

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函数。