Vue相关合集：＜系列1-对 Vue 里 template 编译的理解＞

详细步骤：

整体逻辑分为三个部分：

解析器(parse) - 将 模板字符串 转换成 element ASTs

优化器(optimize) - 对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化

代码生成器(generate) - 使用 element ASTs 生成 render 函数代码字符串

总结：首先通过parse将template解析成AST,其次optimize对解析出来的AST进行标记，最后generate将优化后的AST转换成可执行的代码（AST(abstract syntax tree 抽象语法树), 是源代码的抽象语法结构的树状表现形式）