Vue.js 源码（8） —— 模板编译

这是我参与更文挑战的第8天，活动详情查看： 更文挑战。

前言

大多数同学在使用 Vue.js 开发时，基本都还是使用的模板。

但是 Vue.js 中创建 html 并不是只有模板这一种途径，我们可以使用 render（渲染函数）来创建 html，或者使用 jsx 来创建 html。

我们经常使用的模板会被编译转换成渲染函数，渲染函数执行后，会得到一个虚拟节点树用于渲染。

下面，我们将一起学习模板转换成渲染函数的整体过程。

模板编译

将模板编译成渲染函数可以分为两个步骤，先将模板解析成 AST(Abstract Syntax Tree，抽象语法树)，然后再使用 AST 生成渲染函数。

由于静态节点时不需要重新渲染的，所以在生成 AST后，还需要遍历一遍，给所有静态节点做一个标记。

模板编译分成三部分内容：

• 将模板解析为 AST
• 遍历 AST 标记静态节点
• 使用 AST 生成渲染函数

这三部分，分别对应三个模块

• 解析器
• 优化器
• 代码生成器