10月5日,尤大大帶着pre-alpha版本的Vue3.0走來了。
粗略看了一下源碼,發現源碼基本都轉化成了 typeScript 。
我們對照着 “ Vue 3.0 Updates ” 的主題演講來分析一下:
1、速度方面:
通過更新 runtime-core 與 runtime-dom ,支持了包括 Fragments、Portals與Suspense w/ async setup() 等(似乎有點越來越像 react),支持 Composition API 、Options API 和 typings,配合 Proxy 的引入,極大程度上提高了響應式的能力。
Composition API 與 Proxy 的運用使得組件化更加靈活,邏輯業務組件的編寫與UI組件的多樣化能夠更好的實現。
2、體積方面:
runtime-core 體積壓縮成了 約10kb
3、維護性:
代碼遷移成 TypeScript (還沒學的抓緊啦)
編譯器(Compiler)優化,以下借用尤大大的特性更新圖翻譯一下:
使用模塊化架構
優化 "Block tree"
更激進的 static tree hoisting 功能
支持 Source map
內置標識符前綴(又名 "stripWith")
內置整齊打印功能
移除 source map 和標識符前綴功能後,使用 Brotli 壓縮的瀏覽器版本精簡了大約 10KB
可見,編譯器更多從數據結構入手,優化架構層級,降低使用成本。
4、更接近原生開發
5、讓你更輕鬆開發
其次是 GitHub 上的源碼目錄:
- reactivity 目錄:數據響應式系統,主要使用 Proxy。
- runtime-core 目錄:支持 v-dom 與 Vue 原生的各種 API 在瀏覽器上的調用,調用 Vue 特性的相關代碼。
- runtime-dom 目錄: 調用各類瀏覽器原生 DOM 事件的相關代碼。
- runtime-test 目錄: 測試用的runtime的相關代碼。
- server-renderer 目錄: SSR 相關代碼。
- compiler-core 目錄: 支持 Vue 原生編寫的 編譯器特性,以及開發者編寫的編譯器特性的相關代碼。
- compiler-dom 目錄: 調用瀏覽器的編譯器的相關代碼。
- shared 目錄: 無內置API。
- vue 目錄: 實現 vue 構建與編譯的相關代碼。