AST语法树的生成

一、前言

• 在上一篇博客 Vue编译器初探 我们了解到，Vue 里面将模板字符串 template 编译成渲染函数 render 字符串这个过程中，有两个重要的步骤：
  • template -> AST语法树 (parse)
  • AST语法树 -> 目标平台代码 (generate)
• 而其中，parse 的函数定义在 ./src/compiler/parser/index.js 里面
  下面，我们就来分析一下这个 parse 函数是如何生成 AST 语法树的

二、Parse

• 保持传统，还是整理了一份关系图出来，不过因为这个关系有那么忆点点复杂，只能把图“竖”着放上来，如果想看横图可以到这里去看：关系横图
  

三、总结

• 关系图那么大主要是因为需要编译处理的粒度都精细到了每一个html标签的每一个属性，但是从整体去看，无非就是调用了一个 parseHTML 函数去一点一点解析 template 字符串，并且在合适的 token 调用合适的钩子函数，比如在解析开始标签的时候执行 start 钩子，start 钩子函数会初步地处理标签的 v-for、v-if、v-else 等这些指令，而所谓的处理就是在这个标签的描述对象上面添加一些特殊的属性来更细致地描述这个标签。
• 最后，整个 template 字符串解析完毕后，得到的就是一个描述整个DOM关系的 AST 对象。这就是 AST 语法树的生成
• 生成 AST 语法树后，AST 对象就会被 generate 成目标平台代码，不过这些都是后话了。