Vue3模板编译原理是如何深入解析并高效转译为DOM元素的？

本文共计5339个文字，预计阅读时间需要22分钟。

Vue的编译模块包含4个目录：compiler-core、compiler-dom、compiler-sfc、compiler-ssr。

其中，compiler-core是Vue编译的核心模块，不依赖于平台。其他三个模块分别针对浏览器、单文件组件和服务端渲染。

Vue 的编译模块包含 4 个目录：

compiler-core compiler-dom // 浏览器 compiler-sfc // 单文件组件 compiler-ssr // 服务端渲染

其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。

Vue 的编译分为三个阶段，分别是：parse、transform、codegen。

其中 parse 阶段将模板字符串转化为语法抽象树 AST。transform 阶段则是对 AST 进行了一些转换处理。codegen 阶段根据 AST 生成对应的 render 函数字符串。

Parse

Vue 在解析模板字符串时，可分为两种情况：以 < 开头的字符串和不以 < 开头的字符串。

不以 < 开头的字符串有两种情况：它是文本节点或 {{ exp }} 插值表达式。