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 的主要功能的實現，包括
可以看出，新的 vue **倉庫是模組化的。接下來我們逐一來看看每個模組暴露的 api。
@vue/runtime-core 模組
大部分 vue 開發者應該不會用到這個模組，因為它是專門用於自定義 renderer 的。
使用方法示例：
@vue/runtime-dom 模組
@vue/runtime-test 模組
這個模組的主要功能是用物件來表示 dom 樹，方便測試。並且提供了很多有用的 api 方便測試：
@vue/reactivity 模組
這是乙個極其重要的模組，它是乙個資料響應式系統。其暴露的主要 api 有 ref(資料容器)、reactive(基於 proxy 實現的響應式資料)、computed(計算資料)、effect(***) 等幾部分：
很明顯，這個模組就是 composition api 的核心了，其中的 ref 和 reactive 應該重點掌握。
@vue/compiler-core 模組
這個編譯器的暴露了 ast 和 basecompile 相關的 api，它能把乙個字串變成一棵 ast。
@vue/compiler-dom 模組
這個模組則基於上個模組，針對瀏覽器做了適配，如對 textarea 和 style 標籤做了特殊處理。
@vue/server-renderer 模組
目前這個模組沒有實現任何功能。
vue 模組
這個模組就是簡單的引入了 runtime 和 compiler：
閱讀建議
強烈推薦大家用假期這段時間把 vue 3 的原始碼通看一遍，因為目前的**結構清晰，而且**量相對較少。
關於閱讀順序，我的建議是
先讀 reactivity，能最快了解 vue 3 的新特性；
再讀 rumtime，理解元件和生命週期的實現；
如果還有時間再讀 compiler，理解編譯優化過程。
另外如果你想省時間，可以直接看所有 __tests__ 目錄裡的測試用例來了解 vue 3 的所有功能。目前有不到 700 個測試用例。
關注我
vue3原始碼學習
dev node scripts dev.js sourcemap div src dist vue.global.js script 初始化 vue2 new vue mount mount掛載 const vue 解構出來 mount script 除錯 f12 sources 設定斷點 ste...
Vue3讀原始碼 1
要讀懂原始碼還是要有一定的基礎的，在此就預設是會的。我使用的工具是vscode，廢話不多說，首先看最外層的函式 var vue function exports 可以看到，vue是 裡的自執行函式的返回值exports，是個物件。exports是函式接收乙個空物件引數然後經過函式處理後返回的。那麼函...
如何除錯Vue3原始碼？
最近想系統學習一下vue3的源 本篇內容記錄和分享一下，如何除錯vue3的源 注意，vue3的原始碼是在這個 core目錄下，一些同學別一直找目錄為vue3的資料夾，那是找不到的哈。github雖好，但是對於國內使用者，總還是有點敵意，訪問的時候經常進不去，或者很慢，我在公司訪問github時好好的...