學(xué)習(xí) Vue3 源碼，看這個庫就夠了

“哥，我面試字節(jié)掛了！”

小明哭喪著臉：“MD，太卷了！這 Vue3 剛轉(zhuǎn)正沒多久，面試官就問上我原理了，什么 reactivity 實(shí)現(xiàn)原理，proxy ，Vue3初始化的流程，編譯優(yōu)化，diff 算法的實(shí)現(xiàn)……直接一面就掛了！”

“面試問原理正常呀， 雖然 Vue3 剛轉(zhuǎn)正，但已經(jīng)發(fā)版很久了呀，你不會沒關(guān)注吧？ ”

小明抓了抓頭發(fā)：“關(guān)注是關(guān)注了， 但源碼看不懂呀 ，那一個 renderer.ts 文件就 2000 多行代碼，這怎么看呀？”。

“源碼是難，但如果你想面大廠拿高工資，源碼是繞不過的呀。面試官通過問你源碼，一下子就能知道你是不是一個愛學(xué)習(xí)愛鉆研的同學(xué)，還有呀，那 Vue3 項(xiàng)目那么大，處理的工程問題也要比我們平時做的項(xiàng)目復(fù)雜不知多少倍了，看看人家解決問題的思路和方式，也是非常受益的?！?/span>

“哥，源碼重要性我知道，關(guān)鍵是看不懂……你那有沒有好的 Vue3 源碼學(xué)習(xí)資料呀 ，趕緊給老弟推薦推薦~”  

“你別說，還真讓你趕上了，最近 github 上有一個庫叫做 mini-vue , 用它來學(xué)習(xí) Vue3 源碼可以把難度降到最低。

“mini-vue 這個庫主要特點(diǎn)是把 Vue3 源碼中最核心的邏輯剝離出來，只留下核心邏輯，而且?guī)в?/span>詳細(xì)的中文注釋以及完善的輸出，可以幫助你快速理解框架核心運(yùn)行流程?！?/span>

注釋說明了邏輯處理的 case 是什么,非常清晰 

圖片截取自mini-vue

“哇塞，還有中文注釋呢，真是太貼心了，畢竟我這英文確實(shí)不咋地哈哈！”

“你再跑一下庫的 example 看看， 就那個 helloworld ，然后看看控制臺的輸出?！?/span>

"這些輸出是什么？等等， 難道說是程序執(zhí)行的流程節(jié)點(diǎn)？"

“沒錯，就是程序執(zhí)行的流程， 基于這個輸出日志，你就能知道實(shí)例化一個組件的流程是什么了， 有助于你理解整個框架的執(zhí)行流程， 先建立一個整體認(rèn)知?！?/span>

“而且你看看輸出的右側(cè)，你可以直接點(diǎn)擊跳轉(zhuǎn)到對應(yīng)的代碼上，然后就可以開開心心打上斷點(diǎn)，好好琢磨這代碼的實(shí)現(xiàn)了。”

“真是絕了， 怪不得這個庫現(xiàn)在已經(jīng)拿到 4.4k 的 star 了”

“還不只如此呢，再給你看個絕活，mini-vue 庫里面的代碼實(shí)現(xiàn)是和 Vue3 源碼里面的實(shí)現(xiàn)保持高度一致的，比如說函數(shù)的命名吧，你看這個 diff 算法函數(shù)是 patchKeyedChildren 吧”

當(dāng)你看完簡單版的實(shí)現(xiàn)后，想看看源碼里面是如何實(shí)現(xiàn)的， 你只需要復(fù)制這個函數(shù)名，然后跑到 Vue3 里面搜索一下就可以了。

“我草，這個絕了，我看完簡單版本之后，再去看源碼的話，難度就降低很多了呀！”

“哈哈哈，是的，這個其實(shí)也符合學(xué)習(xí)模型，如果你一上來就看特別復(fù)雜的，對你來講就到了學(xué)習(xí)的恐慌區(qū)了，很多同學(xué)就是被嚇的，一看代碼量那么大，邏輯那么復(fù)雜，直接就放棄了。而學(xué)習(xí) mini-vue 這個庫就是簡單模式，我再跟你說說 mini-vue 是基于什么思想做出來的吧  你以后也可以按照它的方式來實(shí)現(xiàn)你自己的 mini-react、mini-webpack、mini-rollup ?！?/span>

“真的是迫不及待了，哥你趕快坐下，我這就給你買罐紅牛去，好好給我上一課~哈哈”

我喝了一口剛剛從冰箱拿出來的冰鎮(zhèn)紅牛，翹著二郎腿緩緩說道：“看你今天這么好學(xué)的份上，我再給你嘮叨幾句。像 Vue3 這么大的工程項(xiàng)目，它會做很多事，比如給開發(fā)環(huán)境下的用戶良好的錯誤提示↓”

“你看這個，這里是在處理 HMR （熱更新）↓”

“而這些邏輯在你剛剛看源碼的時候是不需要關(guān)心的，但是這部分的邏輯對于你這個新手來講非常不好區(qū)分，我給你畫個圖你感受感受”

“哈哈哈，哥你可真是靈魂畫手呀，這尼瑪畫的這么抽象，不過我看明白了。你是指紅色的方塊是核心邏輯，而紫色的圓圈都是非核心的吧，比如錯誤提示和HMR”

“哈哈哈，看來我的畫功還是不錯的，你一下就明白了，就是這個道理。而我們學(xué)習(xí)源碼的時候第一步就是先摸清這個核心邏輯，這個也稱之為 happy path， 相當(dāng)于一棵大樹的樹干。把這個拿下后，后面我們就可以自己看了，代碼邏輯里面無非就是處理各種各樣的 edge case（邊緣情況）。你有沒有發(fā)現(xiàn)，其實(shí)這是對 Vue3 框架做了功能上的拆分?！?/span>

“我擦，又學(xué)到了，我已經(jīng)感受到了，把 Vue3 整體拆分變小，然后這樣難度就直線下降了，而我們再把 happy path 理解透徹，這一步學(xué)完之后再去理解那些 HMR 或者錯誤提示的邏輯，也會變得更簡單。”

“對的，這個就是任務(wù)拆分的思想，你可以橫著切，也可以縱著切，想怎么切就怎么切，如果從算法思想的角度來講的話就是……”

“就是分而治之的思想！” 小明趕緊把他知道的名詞搶先回答出來，生怕別人不知道他學(xué)過算法。

“哎呀，可以呀小明，看來你算法學(xué)得不錯嘛。所以這個 mini-vue 庫對于想學(xué)習(xí)源碼的同學(xué)來講非常有意義，現(xiàn)在作者已經(jīng)完成了三大模塊的編寫了?！?/span>

“噢？三大模塊是啥？我這還真不知道”

“三大模塊是指 reactivity（響應(yīng)式模塊）、runtime-core（運(yùn)行時模塊）、compiler（編譯模塊）， Vue3 的核心就是這三大模塊。現(xiàn)在 Vue3 的源碼是采用 monorepo 的形式， 分了好多模塊，不過對于你這初學(xué)者來講，研究透三大模塊就夠你面試用了”

"哦了哦了，我這就去把 mini-vue clone 下來好好學(xué)習(xí)學(xué)習(xí)，回頭面試的時候爭取搞定面試官！哥，那我學(xué)習(xí) mini-vue 遇見問題的話可還得麻煩你呀，哈哈哈~"

“你可以直接加 mini-vue 作者的微信，我們都叫他大崔哥。有問題直接問他就好了嘛 ，我有問題也是直接問他， 關(guān)于 mini-vue 上的問題他會回答你的，放心好了”

↑掃碼添加 mini-vue 作者 大崔哥 微信↑

"我這就趕緊加上大崔哥哈哈哈~開心"