本期內(nèi)容小編將給大家?guī)?lái)：

• 分析啟動(dòng)腳本
• 查找入口文件

看看首次編譯過(guò)程，從源碼層面解析初始化細(xì)節(jié)

在我們開(kāi)始這期內(nèi)容之前，小編先帶領(lǐng)大家回顧一下上期的知識(shí)點(diǎn)。

還是從這張圖開(kāi)始，在上期內(nèi)容中我們談到，Vue3.0的源碼中最為核心的包就是叫做以 vue命名的文件包，在這個(gè)包內(nèi)有三個(gè)依賴關(guān)系，其中 runtime-dom 和 compiler-dom 是明顯的依賴關(guān)系，但其中還有一個(gè)隱性的依賴叫做reactivity 的依賴，這里面主要是做響應(yīng)式的一些處理，后期小編會(huì)帶領(lǐng)大家著重探討這個(gè)依賴包的原理，而其實(shí)真正的依賴在 runtime-core 這個(gè)包里，這個(gè)包才是真正告訴你createApp 是怎么由來(lái)的，內(nèi)部又做了哪些事情。

小編這里梳理了一下邏輯關(guān)系圖，createApp 這個(gè)方法最終在 createAppAPI 內(nèi)部有一個(gè)工廠函數(shù)在這里得到了一次擴(kuò)展 createApp 的方法，擴(kuò)展此方法最為重要的一點(diǎn)就是為了讓這個(gè)函數(shù)變得更加通用，我們知道在 createApp 里面?zhèn)魅胍粋€(gè) render 函數(shù)，但是對(duì)于 createApp 來(lái)說(shuō)它只管調(diào)用傳入進(jìn)來(lái)的參數(shù)，而并不關(guān)心你這個(gè)參數(shù)做了哪些的邏輯處理，真正我們能夠使用實(shí)例上的方法就是來(lái)源這個(gè) createAPI 擴(kuò)展之后得到的屬性，例如 component mixin use。

正文經(jīng)過(guò)之前的內(nèi)容回顧，想必大家對(duì) createApp已經(jīng)有了深刻的了解，接下來(lái)將進(jìn)入到本章內(nèi)容的核心部分，首先帶領(lǐng)大家分析啟動(dòng)腳本，看看啟動(dòng)腳本都做了哪些事情。

"dev": "node scripts/dev.js --sourcemap",

這行代碼想必大家應(yīng)該都不陌生吧，這就是我們啟動(dòng)項(xiàng)目的運(yùn)行腳本我們就要從 dev.js 這個(gè)腳本文件開(kāi)始下手。

WeChat46b3d93f7c154ae5e1b95022c46eb57b.png

minimist 是專門(mén)用來(lái)解析傳進(jìn)來(lái)的參數(shù)，什么意思呢?當(dāng)我們?cè)谶\(yùn)行 npm run dev 這行命令的時(shí)候?qū)嶋H上是運(yùn)行 node scripts/dev.js 當(dāng)后面的路徑傳入 -- 或者 - 的時(shí)候會(huì)被解析成為第一個(gè)參數(shù)，否則會(huì)打包成 vue 的包。

WeChat96a3eefa625cef34b030b68fe2353724.png

在這張圖中也能看出 dev-sfc 部分使用的打包格式為 esModule 格式，在瀏覽器中則會(huì)以type=module 出現(xiàn)。那么我么現(xiàn)在知道指令映射的代碼中的含義了，那么問(wèn)題來(lái)了下一步我們?cè)摳墒裁茨?哈哈哈～ 如果對(duì)工程化的框架比較了解的話，我們就要看看打包工具的配置文件，看看打包過(guò)后你的 entry 入口文件和你的export 打包后輸出文件是怎樣配置的，在源碼中使用的是 rollup 打包生成的，所以我們要瀏覽一下 rollup.config.js 這個(gè)配置文件。

WeChatc8eb0ccf03ff5fb6b79d0ed338c01de1.png

在配置系文件中我們就可以看到，所有獲取包目錄都是從 packages 中得來(lái)的，通過(guò)process.env.TARGET 進(jìn)行包名的路徑拼接，就會(huì)得到 /packages/xxx

WeChat024e26087aec3918dc0ecf425d3c7580.png

這里就是要配置的一些打包選項(xiàng)，例如CommonJs ECMAScript 格式，這里講一下 iife格式，就是打包后生成一個(gè)匿名函數(shù)自調(diào)的格式，(()=>{})()

WeChat465926fb4d72cd8107ca6bf763ffba32.png

這里我們看到真正打包的是以 runtime 開(kāi)頭的包名稱，這時(shí)候他會(huì)根據(jù)你的指令中是否包含 -f runtime-xxx 這種格式的映射，生成兩種第一個(gè)是運(yùn)行時(shí)打包，沒(méi)有在初始化的時(shí)候把編譯器打包進(jìn)去，第二個(gè)則是全量打包。

WeChatee256bb4095f1e2a86c2e2321b505971.png

所以，我們就找到了在 packages/vue/index.ts這個(gè)路徑下的包，在這個(gè)包里面有一個(gè)叫做compileToFunction 編譯函數(shù)其真正的作用就是一個(gè)是解析 template 中的 innerHhtml，另一個(gè)就是生成一個(gè) render 渲染函數(shù)，另外，在這個(gè)函數(shù)中他會(huì)判斷你傳進(jìn)來(lái)的參數(shù)是不是以字符串形式的模板另外一個(gè)是不是 dom，就是說(shuō)支持的寫(xiě)法 mount("< div>xxx") mount('#app') 或者 mount(app)。

WeChat98c822fa89560f875415a68ff6276a83.png

這里在 callStack 中就真正的解析了compileToFunction 是如何一步一步的變成渲染函數(shù)。

WeChat00a9bbcb59649cbbf8b1ce99b6c81d43.png

WechatIMG81.jpeg

從這個(gè)上面我們就看出，template 真正就是傳入的 innterHtml。

WeChat70bfdad15d56582ac1f31f3ea6ccab68.png

通過(guò)瀏覽器調(diào)試后我們就得出compileToFunction 是在 finishComponentSetup這個(gè)函數(shù)中調(diào)用的，而 template 就是要解析的innerHTML。

WeChat5f3653a52a450b5ece0d35a757cabe17.png

vue包中使用 registerRuntimeCompiler 將 compileToFunction 這個(gè)函數(shù)注冊(cè)，這是為了初始化需要編譯時(shí)能夠調(diào)用它。這里原封不動(dòng)導(dǎo)出 runtime-dom，因此有了vue -> runtime-dom -> runtime-core這樣的依賴關(guān)系。

WeChat581967ab4ceb37c6fefa2ed599d85bad.png

WeChat802ba115543725ce52877e96d64aa870.png

隨后的流程就是：

createRenderer() => baseCreateRenderer() =>

createAppAPI(render, hydrate) => createApp()

app.mount() => render() => patch(n1, n2) =>

processComponent() => mountComponent()

這里我們主要研究一下 mountComponent() 掛載組件做了哪些事情。

WechatIMG82.jpeg

WeChat280ea252a066a6ad52f94d5f261b9ba3.png

在這個(gè)函數(shù)內(nèi)主要有兩個(gè)函數(shù)調(diào)用，一個(gè)是createComponentInstance 創(chuàng)建組件實(shí)例，另一個(gè)是 setupComponent 初始化組件實(shí)例，從這個(gè)函數(shù)開(kāi)始找尋。

WechatIMG86.jpeg

WechatIMG87.jpeg

在這里我們就看到組件初始化接收的就是一個(gè)setup 這塊對(duì)傳入不同方法做了各種處理，例如promise隨后會(huì)在 handleSetupResult() 這個(gè)方法內(nèi)處理 setup 的返回值。

WechatIMG88.jpeg

根據(jù) setup 返回不同的類型作出處理，比如 返回的是一個(gè)函數(shù)，對(duì)象或者字符串之類的。

WechatIMG89.jpeg

執(zhí)行完畢后都會(huì)走 finishComponentSetup() 這個(gè)方法。

WeChatde62b32d0810ec4d669cb295a41fd91a.png

WeChat3cc852f1a9e27e9a71503075b277a1c8.png

所以在這個(gè)函數(shù)內(nèi)真正的是 返回一個(gè) render 函數(shù)，并且兼容 Vue2.0 的方法。

到這里，基本上初始化所有的邏輯就理順啦～

總結(jié)

這期內(nèi)容小編就告訴大家從代碼的層面一步步的深入了解初始化過(guò)程，首先是從 package.json目錄文件中鎖定執(zhí)行的哪個(gè)腳本文件，我們通常使用的打包工具如：webpack vite 或者 rollup之類的都會(huì)有一個(gè)配置文件 xxx.config.js 從這個(gè)文件中我們就能鎖定 entry 的入口文件，通過(guò)確定入口文件之后我們就能找到各個(gè)包之間的依賴關(guān)系，根據(jù)依賴包，一步步深挖理解初始化的整體流程。

順便說(shuō)一句 Vue3.0 在2022年2月7日將正式成為默認(rèn)版本，屆時(shí)我們安裝的 vue 將會(huì)是3.x這個(gè)版本，屬于Vue3的時(shí)代將正式開(kāi)啟!