⑴ vue3源码学习--编译阶段汇总
Vue3编译阶段汇总：
核心包与工具：
- vueloader：基于webpack的入口，用于处理Vue单文件组件。
- vueLoaderPlugin：vueloader的插件，负责处理核心操作，如匹配资源并调用相应方法。
- @vue/compilersfc：处理Vue单文件组件中的script、template和style部分。
- compilerdom：与compilercore协同工作，专门处理template部分，将其转换为浏览器可识别的JavaScript代码。
- compilercore：处理template的核心包，包含模板解析和转换的核心逻辑。
编译流程：
- script部分：通过@vue/compilersfc的compileScript方法处理，将JavaScript代码转换为AST节点，然后进一步处理。
- template部分：通过compilerdom和compilercore的协同工作，将模板转换为浏览器可识别的JavaScript代码。这一过程中，模板被解析为AST，再经过优化和代码生成，最终生成render function。
- style部分：根据其类型调用相应处理函数，如处理CSS变量和scopeId。
模式差异：
- dev模式：render function会被分离出来，以支持热模块替换，便于开发过程中的即时更新。
- prod模式：为了提高代码效率，render function等代码会被整合到setup函数中。
总结：
- Vue3的编译阶段是一个清晰且有序的流程，涉及多个核心包和工具的协同工作。
- 通过深入理解编译流程，我们可以更好地掌握Vue源码的工作原理，从而更有效地开发和优化Vue应用。
⑵ vue3源码学习--编译阶段汇总
从vue-loader开始，我们逐步探索vue/compiler-core包的源码，完成了编译阶段的解析（忽略了compiler-ssr部分）。
涉及的包包括：
- vue-loader：基于webpack的入口
- vueLoaderPlugin：处理核心操作
- @vue/compiler-sfc：处理script、template和style
- compiler-dom：处理template，与compiler-core协同工作
- compiler-core：处理template的核心部分
vue-loader首先安装vueLoaderPlugin，主要负责匹配资源并调用相应方法。script部分通过@vue/compiler-sfc的compileScript处理，其他如template和style则根据其类型调用相应处理函数。
编译流程中，script通过babel将JavaScript转换为AST节点，然后进行处理。template则通过compiler-dom和compiler-core转换为浏览器可识别的JavaScript代码。CSS变量和scopeId也是在这个阶段进行处理的。
在dev模式下，render function会被分离出来以支持热模块替换（HMR），而prod模式下，这些代码会被整合到setup函数中，以提高代码效率。
最后，总结整个编译阶段，对Vue源码有了深入理解，不再是神秘的魔法，而是清晰的流程。希望这些内容对您有所帮助，祝大家新春快乐！