作者：方應杭
https://juejin.im/post/5d977f47e51d4578453274b3
前幾天5号淩晨，尤雨溪公布了 Vue 3 源代碼。
話不多說，我們趁熱對 Vue 3 源碼進行一些簡要的分析。如果你還沒有閱讀過 Composition API RFC，可能無法完全看懂下面的内容。
相容性
目前打包後的代碼是 ES2015+，不支援 IE 11。
對 TypeScript 的使用
目前的代碼 98% 以上使用 TypeScript 編寫。如果你還沒有學習 TypeScript，請盡快學習，否則可能看不懂源碼。另外有件事情說出來可能會讓你非常驚訝，Vue 3 的源代碼完全沒有使用 class 關鍵字！（隻在測試代碼和示例代碼裡用到了 class 關鍵字）
什麼時候發正式版
目前 Vue 3 處于 Pre-Alpha 版本。後面應該還會有 Alpha、Beta 等版本。根據 Vue 官方時間表，至少要等到 2020 年第一季度才有可能釋出 3.0 正式版。
代碼結構
代碼倉庫中有個 packages 目錄，裡面是 Vue 3 的主要功能的實作，包括
- reactivity 目錄：資料響應式系統，這是一個單獨的系統，可以與任何架構配合使用。
- runtime-core 目錄：與平台無關的運作時。其實作的功能有虛拟 DOM 渲染器、Vue 元件和 Vue 的各種API，我們可以利用這個 runtime 實作針對某個具體平台的高階 runtime，比如自定義渲染器。
- runtime-dom 目錄: 針對浏覽器的 runtime。其功能包括處理原生 DOM API、DOM 事件和 DOM 屬性等。
- runtime-test 目錄: 一個專門為了測試而寫的輕量級 runtime。由于這個 rumtime 「渲染」出的 DOM 樹其實是一個 JS 對象，是以這個 runtime 可以用在所有 JS 環境裡。你可以用它來測試渲染是否正确。它還可以用于序列化 DOM、觸發 DOM 事件，以及記錄某次更新中的 DOM 操作。
- server-renderer 目錄: 用于 SSR。尚未實作。
- compiler-core 目錄: 平台無關的編譯器. 它既包含可擴充的基礎功能，也包含所有平台無關的插件。
- shared 目錄: 沒有暴露任何 API，主要包含了一些平台無關的内部幫助方法。
可以看出，新的 Vue 代碼倉庫是子產品化的。接下來我們逐一來看看每個子產品暴露的 API。
@vue/runtime-core 子產品
大部分 Vue 開發者應該不會用到這個子產品，因為它是專門用于自定義 renderer 的。使用方法示例：
@vue/runtime-dom 子產品這個子產品是基于上面子產品而寫的浏覽器上的 runtime，主要功能是适配了浏覽器環境下節點和節點屬性的增删改查。它暴露了兩個重要 API：render 和 createApp，并聲明了一個 ComponentPublicInstance 接口。
這是一個極其重要的子產品，它是一個資料響應式系統。其暴露的主要 API 有 ref（資料容器）、reactive（基于 Proxy 實作的響應式資料）、computed（計算資料）、effect（副作用） 等幾部分：
@vue/compiler-core 子產品這個編譯器的暴露了 AST 和 baseCompile 相關的 API，它能把一個字元串變成一棵 AST。
@vue/compiler-dom 子產品
這個子產品則基于上個子產品，針對浏覽器做了适配，如對 textarea 和 style 标簽做了特殊處理。@vue/server-renderer 子產品目前這個子產品沒有實作任何功能。
vue 子產品
這個子產品就是簡單的引入了 runtime 和 compiler：
閱讀建議
我興奮地立刻把 Vue 3 源代碼掃了一遍，發現其 TypeScript 代碼結構清晰，非常好讀，于是我寫了一篇《Vue 3 源碼導讀》，點選下方的「閱讀原文」即可檢視全文。我沒有直接把文章内容複制過來，是因為微信背景的編輯器實在太**啦 :)強烈推薦大家用假期這段時間把 Vue 3 的源碼通看一遍，因為目前的代碼結構清晰，而且代碼量相對較少。下載下傳代碼後，使用 yarn dev 指令就可以對其進行調試。關于閱讀順序，我的建議是
- 先讀 reactivity，能最快了解 Vue 3 的新特性；
- 再讀 rumtime，了解元件和生命周期的實作；
- 如果還有時間再讀 compiler，了解編譯優化過程。
另外如果你想省時間，可以直接看所有 __tests__ 目錄裡的測試用例來了解 Vue 3 的所有功能。目前有不到 700 個測試用例。
總結一下VUE3.0的改進
Vue 3 主要的架構改進、優化和新功能均已完成。下面了解一下針對 Vue 3 計劃并已實作的主要架構改進和新功能：
編譯器（Compiler）
使用子產品化架構
優化 “Block tree”
更誇張的 static tree hoisting 功能
支援 Source map
内置辨別符字首（又名 “stripWith”）
内置整齊列印（pretty-printing）功能
移除 source map 和辨別符字首功能後，使用 Brotli 壓縮的浏覽器版本精簡了大約 10KB
運作時（Runtime）
速度顯著提升
同時支援 Composition API 和 Options API，以及 typings
基于 Proxy 實作的資料變更檢測
支援 Fragments
支援 Portals
支援 Suspense w/ async setup()
最後，還有一些 2.x 的功能尚未移植過來：伺服器端渲染<keep-alive>
<transition>Compiler DOM-specific transforms * v-on DOM 修飾符 * v-model * v-text * v-pre *v-once *v-html * v-show最後，給大家準備了份Vue.js視訊教程，不妨也結合下面的教學視訊，一起學習入門吧！在公衆号背景回複【Vue】，擷取這份資料！
本文完~
閱讀更多
剛入行不久，如何寫出優雅的Java代碼？
阿裡的離職率真的是網際網路大廠裡最低的嗎？
重磅！阿裡内部偷師Android的開發規範文檔
hi！99%的人都在過節，我回饋讀者40本技術書，手慢無！
吵翻天！稅後年薪170萬的阿裡P8程式員征婚被噴到死！
相信自己，沒有做不到的，隻有想不到的
在這裡獲得的不僅僅是技術！