从 Vue 3 源码切入，全面掌握前端编译原理

这首先是一篇源码剖析 Chat。Vue 3.0 源码发布一月有余。目前针对 Vue 3.0 的源码分析基本围绕响应式原理展开，鲜有对模板编译原理进行分析的。这篇 Chat 首先会带大家来啃下这块“硬骨头”——理解 Vue 3 中的 compiler-core。

这同时还是一篇面向任何阶段前端而写的编译原理课程。编译原理作为大厂面试中的热门考点，具备极高的区分度，但其对应的书面学习材料却普遍具备一定的阅读难度，对野生程序员居多的前端同学并不友好。本文在写作的过程中，穿插了大量的代码示例+图片解说，力求不装 x、说人话，确保阅读体验如丝般顺滑。

事实上，前端工程师需要掌握的编译原理远没有那么学术化。本文除了会帮助大家打开编译原理世界之外，同时也会把“划重点”这件事情做掉，不带大家做无用功。

如果你仍然陷在无尽的轮子和 API 里兜兜转转，渴望创造能力的质变、却又一次次被原地拍倒在沙滩上；或者是多次挑战大厂未果，苦于始终搞不懂面试官口中那些“高大上”的词汇到底意指何处。那么本文希望能够帮你以一个舒服地姿势吸收掉这些看似晦涩、实则“就那么回事儿”的知识；在掌握 Vue 3.0 最新的编码思路的同时，帮你完成前端编译原理从 0 到 1 的突破；在未来的面试中，能和面试官“谈笑风生”。

知识结构分布如下：

• 为什么是 Vue 3.0
• Vue 3.0 源码解析——模板编译过程
  • Vue 3.0 在编译过程里做了什么
  • Vue 3.0 编译链路源码解析
  • 主流程分析
  • 细分流程分析
• 编译原理——通用基本功
  • 理解编译器
  • 编译器的起源
  • 编译器和解释器，这回要分清楚
  • 编译过程整体把握
  • 词法分析原理探索
  • 语法分析过程——抽象语法树（AST）的构建
• 学习拓展——如何更进一步

阅读全文: http://gitbook.cn/gitchat/activity/5dcbab8dca66fe75e72ccbb7

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。