Vue3 的 Ast 编译过程我们通常不会在日常开发中接触到，因为它往往是 vue-loader 为我们做的事情，在.vue的工程化开发模式中，打包出的运行时代码都是经过 Ast 转换成的 render 函数。只有使用运行时编译（runtime + compiler）版本的Vue，你才能找到 Ast 编译相关的源码，并进行浏览器控制台调试。
学习 Ast 编译原理，笔者认为不需要掌握很多细节，只需要知道 Vue 将 template 转换为 render 函数，并生成代码的思路就行。
Vue Ast 核心逻辑可总结为3步：创建AST -> AST转换 -> 生成代码
其中创建AST的过程，正是将template字符串解析为AST节点树的过程。这方面逻辑十分复杂，笔者经过自己研究，总结出了一套简化流程。可以让大家理解Vue的“正则匹配+移动光标”解析模式。
那在AST解析的过程中，是如何维护父子节点关系的呢？
Ast树顾名思义，也是树状结构，子节点就依托在Ast节点的children属性上。在移动光标进行正则匹配的过程中，Vue内部维护了一个 ancestor 栈，在匹配到元素节点时就将元素节点推入 ancestor 栈，栈中从上到下自然存储着Ast的由父至子节点。
比如我们有下面这样存在3层父子关系的template：
<div>
<p>
<span>这是一段文本</span>
</p>
</div>
下面这张图简单的阐述了父子节点解析和关联的大致过程：
上面这两张图就阐述了 Vue 将 template 字符串解析为 AST 节点树的大致思想。
当然这是远远不够的，后面还有 AST转换 -> 生成代码 的过程，也十分的复杂，笔者经过阅读代源码，总结出了下面超大的流程图，因为实在是太复杂，而且平时开发中不易接触，在这里就不多介绍了。感兴趣的小伙伴可以将下面图片下载，对照源码进行参考，只希望能对你的AST探究之路提供一些帮助。
