Vue3源碼解析,打造自己的Vue3框架
----------------------
下栽地址:https://www.itwangzi.cn/4748.html
----------------------
Vue3源碼解析,打造自己的Vue3框架
Vue3 項目結構
- reactivity :響應式系統
- runtime-core :與平臺無關的運行時核心(可以創建針對特定臺的運行時-自定義染器)
- runtime-dom :針對瀏覽器的運行時。包括 DOM API,屬性,事件處理等
- runtime-test :用于測試
- server-renderer ;用于服務器端渲染
- compiler-core :與平臺無關的編譯器核心
- compiler-dom :針對瀏覽器的編譯模塊
- compiler-ssr :針對服務端渲染的編譯模塊
- compiler-sfe :針對單文件解析
- size-check :用來測試代碼體積
- template-explorer : 用于試編譯器輸出的開發工具
- shared :多個包之間共享的內容
- vue :完整版本包括運行時和編譯器
代碼倉庫中有個 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,主要包含了一些平臺無關的內部幫助方法。
對于一個組件庫來說,除了”組件“本身以外,另個一個非常重要的東西就是文檔展示。參考市面上優秀的開源組件庫,無一不是既有高質量的組件,更有一套非常規范且詳細的文檔。文檔除了對組件的功能進行說明以外,同時也具備了組件交互預覽的能力,讓用戶的學習成本盡可能地降低。
對于許多程序員來說,最討厭的無非是兩件事。一件是別人不寫文檔,另一件是自己寫文檔。既然在組件庫里文檔是必不可少的,那么我們應該盡可能地減少寫文檔的痛苦,尤其是這種既要有代碼展示、又要有文字說明的文檔。
市面上對于組件文檔展示的框架也有不少,比如 Story Book、Docz、Dumi 等等。它們都有一套自己的規則能夠讓你展示自己的組件,但是對于團隊來說學習成本較高,同時它們也在一定程度上割裂了“開發”和“寫文檔”之間的體驗。