想必大家在使用
Vue
开发的过程中,基本都是使用模板的方式。那么你有过「模板是怎么在浏览器中运行的」这种疑虑嘛?
- 首先直接把模板丢到浏览器中肯定是不能运行的,模板只是为了方便开发者进行开发。
Vue
会通过编译器将模板通过几个阶段最终编译为render
函数,然后通过执行render
函数生成Virtual DOM
最终映射为真实DOM
。 - 接下来我们就来学习这个编译的过程,了解这个过程中大概发生了什么事情。这个过程其中又分为三个阶段,分别为:
将模板解析为 AST
优化 AST
将 AST
转换为 render
函数
在第一个阶段中,最主要的事情还是通过各种各样的正则表达式去匹配模板中的内容,然后将内容提取出来做各种逻辑操作,接下来会生成一个最基本的 AST
对象
{
// 类型
type: 1,
// 标签