Vue3源碼解析,打造自己的Vue3框架
----------------------
下栽地址:https://www.itwangzi.cn/4748.html
----------------------
Vue3源碼解析,打造自己的Vue3框架
Vue3 項(xiàng)目結(jié)構(gòu)
- reactivity :響應(yīng)式系統(tǒng)
- runtime-core :與平臺(tái)無(wú)關(guān)的運(yùn)行時(shí)核心(可以創(chuàng)建針對(duì)特定臺(tái)的運(yùn)行時(shí)-自定義染器)
- runtime-dom :針對(duì)瀏覽器的運(yùn)行時(shí)。包括 DOM API,屬性,事件處理等
- runtime-test :用于測(cè)試
- server-renderer ;用于服務(wù)器端渲染
- compiler-core :與平臺(tái)無(wú)關(guān)的編譯器核心
- compiler-dom :針對(duì)瀏覽器的編譯模塊
- compiler-ssr :針對(duì)服務(wù)端渲染的編譯模塊
- compiler-sfe :針對(duì)單文件解析
- size-check :用來(lái)測(cè)試代碼體積
- template-explorer : 用于試編譯器輸出的開(kāi)發(fā)工具
- shared :多個(gè)包之間共享的內(nèi)容
- vue :完整版本包括運(yùn)行時(shí)和編譯器
代碼倉(cāng)庫(kù)中有個(gè) packages 目錄,里面是 Vue 3 的主要功能的實(shí)現(xiàn),包括
- reactivity 目錄:數(shù)據(jù)響應(yīng)式系統(tǒng),這是一個(gè)單獨(dú)的系統(tǒng),可以與任何框架配合使用。
- runtime-core 目錄:與平臺(tái)無(wú)關(guān)的運(yùn)行時(shí)。其實(shí)現(xiàn)的功能有虛擬 DOM 渲染器、Vue 組件和 Vue 的各種API,我們可以利用這個(gè) runtime 實(shí)現(xiàn)針對(duì)某個(gè)具體平臺(tái)的高階 runtime,比如自定義渲染器。
- runtime-dom 目錄: 針對(duì)瀏覽器的 runtime。其功能包括處理原生 DOM API、DOM 事件和 DOM 屬性等。
- runtime-test 目錄: 一個(gè)專(zhuān)門(mén)為了測(cè)試而寫(xiě)的輕量級(jí) runtime。由于這個(gè) rumtime 「渲染」出的 DOM 樹(shù)其實(shí)是一個(gè) JS 對(duì)象,所以這個(gè) runtime 可以用在所有 JS 環(huán)境里。你可以用它來(lái)測(cè)試渲染是否正確。它還可以用于序列化 DOM、觸發(fā) DOM 事件,以及記錄某次更新中的 DOM 操作。
- server-renderer 目錄: 用于 SSR。尚未實(shí)現(xiàn)。
- compiler-core 目錄: 平臺(tái)無(wú)關(guān)的編譯器. 它既包含可擴(kuò)展的基礎(chǔ)功能,也包含所有平臺(tái)無(wú)關(guān)的插件。
- shared 目錄: 沒(méi)有暴露任何 API,主要包含了一些平臺(tái)無(wú)關(guān)的內(nèi)部幫助方法。
對(duì)于一個(gè)組件庫(kù)來(lái)說(shuō),除了”組件“本身以外,另個(gè)一個(gè)非常重要的東西就是文檔展示。參考市面上優(yōu)秀的開(kāi)源組件庫(kù),無(wú)一不是既有高質(zhì)量的組件,更有一套非常規(guī)范且詳細(xì)的文檔。文檔除了對(duì)組件的功能進(jìn)行說(shuō)明以外,同時(shí)也具備了組件交互預(yù)覽的能力,讓用戶的學(xué)習(xí)成本盡可能地降低。
對(duì)于許多程序員來(lái)說(shuō),最討厭的無(wú)非是兩件事。一件是別人不寫(xiě)文檔,另一件是自己寫(xiě)文檔。既然在組件庫(kù)里文檔是必不可少的,那么我們應(yīng)該盡可能地減少寫(xiě)文檔的痛苦,尤其是這種既要有代碼展示、又要有文字說(shuō)明的文檔。
市面上對(duì)于組件文檔展示的框架也有不少,比如 Story Book、Docz、Dumi 等等。它們都有一套自己的規(guī)則能夠讓你展示自己的組件,但是對(duì)于團(tuán)隊(duì)來(lái)說(shuō)學(xué)習(xí)成本較高,同時(shí)它們也在一定程度上割裂了“開(kāi)發(fā)”和“寫(xiě)文檔”之間的體驗(yàn)。