深入了解Vue3模板编译原理

Vue 的编译模块包含 4 个目录：其中 compiler-core 模块是 Vue 编译的核心模块，并且是平台无关的。而剩下的三个都是在 compiler-core 的基础上针对不同的平台作了适配处理。其中 parse 阶段将模板字符串转化为语法抽象树 AST。transform 阶段则是对 AST 进行了一些转换处理。codegen 阶段根据 AST 生成对应的 render 函数字符串。ParseVue 在解析模板字符串时，可分为两种情况：以 不以 而以。下图是经过 transform 后的 AST：可以看到 codegenNode、helpers 和 hoists 已经被填充上了相应的值。在正式开始 transform 前，需要创建一个 transformContext，即 transform 上下文。并且无论静态节点嵌套有多深，都会被提升到 hoists 中。而 helperNameMap 是默认的映射表名称，这些名称就是要从 Vue 引入的函数名称。为了能在浏览器正常运行 Vue 程序，就得把浏览器相关的 Vue 数据和函数导入进来。