目錄結構
當我們開始閱讀源碼之前，我們先來看一眼整體的目錄結構
├── packages // 源碼
├── scripts // 腳本文件淤齐，用于存放配置文件更啄，進行編譯打包
├── test-dts // 測試文件
├── .prettierrc
├── api-extractor.json // TypeScript的API提取和分析工具
├── CHANGELOG.md
├── jest.config.js // jest配置文件
├── package.json
├── LICENSE
├── README.md
├── rollup.config.js // rollup配置文件
├── tsconfig.json
└── yarn.lock
現(xiàn)在就正式進入放置源碼的文件夾packages
├── compiler-core // 編譯核心
├── compiler-dom // 針對瀏覽器環(huán)境的編譯模塊，基于compiler-core
├── compiler-sfc // 用于編譯(.vue)文件内狗，學習過webpack的同學就比較熟悉了
├── compiler-ssr // 針對服務端渲染的編譯模塊义锥，基于compiler-core
├── global.d.ts
├── reactivity // 響應式模塊拌倍，可單獨使用
├── runtime-core // 運行時核心
├── runtime-dom // 針對瀏覽器環(huán)境的運行時，基于runtime-core
├── runtime-test // 用于測試的輕量級y運行時
├── server-renderer // 服務端渲染相關
├── shared // 共享的工具庫
├── size-check // 測量代碼體積的工具
├── template-explorer // 內部使用的編譯文件瀏覽工具
└── vue // vue3主入口文件柱恤，引入導出了運行時和編譯器
整體工作流程
從packages中我們可以看到Vue3的源碼核心在于三大部分，即compiler妙真、runtime荚守、reactivity
vue-mastery的官方視頻是介紹成有三大模塊compiler-module,renderer-module练般，reactivity-module薄料，其中renderer-module包含三個階段render parse摄职，mount parse,patch parse。從一個.vue文件出發(fā)谷市，會經過以下階段：
- 編譯器模塊將視圖模板編譯成一個渲染函數(shù)
- 數(shù)據(jù)響應式模塊將模板中使用到的數(shù)據(jù)對象變?yōu)闉轫憫綄ο?/li>
- 渲染模塊開始進入渲染階段(render phase)迫悠，調用剛剛生成的渲染函數(shù)创泄，觀察響應式數(shù)據(jù)對象的變化，并返回一個虛擬的DOM節(jié)點
- 然后在掛載階段(mount phase)鞠抑，調用
mount函數(shù)搁拙，使用虛擬DOM節(jié)點來創(chuàng)建web頁面 - 當觀察的響應式對象發(fā)生變化時箕速，渲染模塊會再次調用渲染函數(shù)創(chuàng)建一個新的虛擬DOM節(jié)點，然后發(fā)送到
patch函數(shù)中，進行DOM diff此熬，然后更新視圖
