⑴ 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源碼有了深入理解，不再是神秘的魔法，而是清晰的流程。希望這些內容對您有所幫助，祝大家新春快樂！