# 前言

我是木木，前端工作3年了，從小白一步步走過來，到現(xiàn)在也開始負(fù)責(zé)公司的架構(gòu)了，從今天開始長期寫博客，分享知識的同時希望和大家一起成長。

今后會逐漸開啟專欄，分享react、vue、webgl、前端工程化等模塊

# 一、vue-next-master 基本結(jié)構(gòu)

鏈接: [Vue 源碼地址]( https://github.com/vuejs/vue-next)

我們將使用vue3.1.4版本進(jìn)行深入全方位學(xué)習(xí)

進(jìn)入源碼目錄執(zhí)行 tree -aI ".git*|.vscode" -C -L 1 獲取整個目錄

vue-next-master目錄結(jié)構(gòu)：

├── packages // 源碼

├── scripts // 腳本文件，用于存放配置文件，進(jìn)行編譯打包

├── 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

packages 結(jié)構(gòu)：

├── compiler-core // 編譯核心

├── compiler-dom // 針對瀏覽器環(huán)境的編譯模塊，基于compiler-core

├── compiler-sfc // 用于編譯(.vue)文件，學(xué)習(xí)過webpack的同學(xué)就比較熟悉了

├── compiler-ssr // 針對服務(wù)端渲染的編譯模塊，基于compiler-core

├── global.d.ts

├── reactivity // 響應(yīng)式模塊，可單獨使用

├── runtime-core // 運(yùn)行時核心

├── runtime-dom // 針對瀏覽器環(huán)境的運(yùn)行時，基于runtime-core

├── runtime-test // 用于測試的輕量級y運(yùn)行時

├── sfc-playground //Vue 3 單文件組件在線 playground

├── server-renderer // 服務(wù)端渲染相關(guān)

├── shared // 共享的工具庫

├── size-check // 測量代碼體積的工具

├── template-explorer // 內(nèi)部使用的編譯文件瀏覽工具

├── vue-compat // vue3兼容相關(guān)

└── vue // vue3主入口文件，引入導(dǎo)出了運(yùn)行時和編譯器

Vue3的源碼核心在于三大模塊：compiler-module,renderer-module，reactivity-module。其中renderer-module包含三個階段render parse，mount parse,patch parse。

# 二、Vue3的源碼核心三大模塊

**新版Vue 3.0計劃并已實現(xiàn)的主要架構(gòu)改進(jìn)和新功能：**

**編譯器（Compiler）**

- 介紹

compile time 我們可以理解為程序編譯時，是指我們寫好的源代碼在被編譯成為目標(biāo)文件這段時間，但我們可以通俗地看成是我們寫好的源代碼在被轉(zhuǎn)換成為最終可執(zhí)行的文件這段時間，在這里可以理解為我們將.vue文件編繹成瀏覽器能識別的.html文件的一些工作，

- 內(nèi)容

compiler-core主要功能是暴露編譯相關(guān)的API以及baseCompile方法

compiler-dom基于compiler-core封裝針對瀏覽器的compiler (對瀏覽器標(biāo)簽進(jìn)行處理)

- 優(yōu)點

使用模塊化架構(gòu)

優(yōu)化 "Block tree"

更激進(jìn)的 static tree hoisting 功能 （檢測靜態(tài)語法，進(jìn)行提升）

支持 Source map

內(nèi)置標(biāo)識符前綴（又名"stripWith"）

內(nèi)置整齊打?。╬retty-printing）功能

移除 Source map 和標(biāo)識符前綴功能后，使用 Brotli 壓縮的瀏覽器版本精簡了大約10KB

**運(yùn)行時（Runtime）**

- 介紹

run time 可以理解為程序運(yùn)行時，即是程序被編譯了之后，打開程序并運(yùn)行它直到程序關(guān)閉的這段時間的系列處理

- 內(nèi)容

runtime-core 虛擬 DOM 渲染器、Vue 組件和 Vue 的各種API

runtime-test將DOM結(jié)構(gòu)格式化成對象，方便測試

runtime-dom 基于runtime-core編寫的瀏覽器的runtime (增加了節(jié)點的增刪改查，樣式處理等)，返回render、createApp方法

- 優(yōu)點

速度顯著提升

同時支持 Composition API 和 Options API，以及 typings

基于 Proxy 實現(xiàn)的數(shù)據(jù)變更檢測

支持 Fragments (允許組件有從多個根結(jié)點)

支持 Portals (允許在DOM的其它位置進(jìn)行渲染)

支持 Suspense w/ async setup()

**reactivity**

單獨的數(shù)據(jù)響應(yīng)式系統(tǒng)，核心方法reactive、effect、 ref、computed

vue 整合 compiler + runtime

# 總結(jié)

個人覺得vue在逐漸react化，初步對比react17的源碼以及vue3.0的代碼后發(fā)現(xiàn)有很多異曲同工之處，尤大借鑒了react hook的想法，但是規(guī)避了一些react的問題。

我們將在后續(xù)的博客中介紹vue3大模塊 ：compiler-module,renderer-module，reactivity-module