學習 Vue3 源碼，看這個庫就夠了
“哥，我面試字節(jié)掛了！”
小明哭喪著臉：“MD，太卷了！這 Vue3 剛轉正沒多久，面試官就問上我原理了，什么 reactivity 實現(xiàn)原理，proxy ，Vue3初始化的流程，編譯優(yōu)化，diff 算法的實現(xiàn)……直接一面就掛了！”
“面試問原理正常呀， 雖然 Vue3 剛轉正，但已經發(fā)版很久了呀，你不會沒關注吧？ ”
小明抓了抓頭發(fā)：“關注是關注了， 但源碼看不懂呀 ，那一個 renderer.ts 文件就 2000 多行代碼，這怎么看呀？”。
“源碼是難，但如果你想面大廠拿高工資，源碼是繞不過的呀。面試官通過問你源碼，一下子就能知道你是不是一個愛學習愛鉆研的同學，還有呀，那 Vue3 項目那么大，處理的工程問題也要比我們平時做的項目復雜不知多少倍了，看看人家解決問題的思路和方式，也是非常受益的。“
“哥，源碼重要性我知道，關鍵是看不懂……你那有沒有好的 Vue3 源碼學習資料呀 ，趕緊給老弟推薦推薦~”
“你別說，還真讓你趕上了，最近 github 上有一個庫叫做 mini-vue , 用它來學習 Vue3 源碼可以把難度降到最低。
“mini-vue 這個庫主要特點是把 Vue3 源碼中最核心的邏輯剝離出來，只留下核心邏輯，而且?guī)в?/span>詳細的中文注釋以及完善的輸出，可以幫助你快速理解框架核心運行流程?！?/span>
注釋說明了邏輯處理的 case 是什么,非常清晰
圖片截取自mini-vue
“哇塞，還有中文注釋呢，真是太貼心了，畢竟我這英文確實不咋地哈哈！”
“你再跑一下庫的 example 看看， 就那個 helloworld ，然后看看控制臺的輸出?！?/span>
"這些輸出是什么？等等， 難道說是程序執(zhí)行的流程節(jié)點？"
“沒錯，就是程序執(zhí)行的流程， 基于這個輸出日志，你就能知道實例化一個組件的流程是什么了， 有助于你理解整個框架的執(zhí)行流程， 先建立一個整體認知?！?/span>
“而且你看看輸出的右側，你可以直接點擊跳轉到對應的代碼上，然后就可以開開心心打上斷點，好好琢磨這代碼的實現(xiàn)了?！?/span>
“真是絕了， 怪不得這個庫現(xiàn)在已經拿到 4.4k 的 star 了”
“還不只如此呢，再給你看個絕活，mini-vue 庫里面的代碼實現(xiàn)是和 Vue3 源碼里面的實現(xiàn)保持高度一致的，比如說函數的命名吧，你看這個 diff 算法函數是 patchKeyedChildren 吧”
當你看完簡單版的實現(xiàn)后，想看看源碼里面是如何實現(xiàn)的， 你只需要復制這個函數名，然后跑到 Vue3 里面搜索一下就可以了。
“我草，這個絕了，我看完簡單版本之后，再去看源碼的話，難度就降低很多了呀！”
“哈哈哈，是的，這個其實也符合學習模型，如果你一上來就看特別復雜的，對你來講就到了學習的恐慌區(qū)了，很多同學就是被嚇的，一看代碼量那么大，邏輯那么復雜，直接就放棄了。而學習 mini-vue 這個庫就是簡單模式，我再跟你說說 mini-vue 是基于什么思想做出來的吧 你以后也可以按照它的方式來實現(xiàn)你自己的 mini-react、mini-webpack、mini-rollup ?！?/span>
“真的是迫不及待了，哥你趕快坐下，我這就給你買罐紅牛去，好好給我上一課~哈哈”
我喝了一口剛剛從冰箱拿出來的冰鎮(zhèn)紅牛，翹著二郎腿緩緩說道：“看你今天這么好學的份上，我再給你嘮叨幾句。像 Vue3 這么大的工程項目，它會做很多事，比如給開發(fā)環(huán)境下的用戶良好的錯誤提示↓”
“你看這個，這里是在處理 HMR （熱更新）↓”
“而這些邏輯在你剛剛看源碼的時候是不需要關心的，但是這部分的邏輯對于你這個新手來講非常不好區(qū)分，我給你畫個圖你感受感受”
“哈哈哈，哥你可真是靈魂畫手呀，這尼瑪畫的這么抽象，不過我看明白了。你是指紅色的方塊是核心邏輯，而紫色的圓圈都是非核心的吧，比如錯誤提示和HMR”
“哈哈哈，看來我的畫功還是不錯的，你一下就明白了，就是這個道理。而我們學習源碼的時候第一步就是先摸清這個核心邏輯，這個也稱之為 happy path， 相當于一棵大樹的樹干。把這個拿下后，后面我們就可以自己看了，代碼邏輯里面無非就是處理各種各樣的 edge case（邊緣情況）。你有沒有發(fā)現(xiàn)，其實這是對 Vue3 框架做了功能上的拆分?！?/span>
“我擦，又學到了，我已經感受到了，把 Vue3 整體拆分變小，然后這樣難度就直線下降了，而我們再把 happy path 理解透徹，這一步學完之后再去理解那些 HMR 或者錯誤提示的邏輯，也會變得更簡單?！?/span>
“對的，這個就是任務拆分的思想，你可以橫著切，也可以縱著切，想怎么切就怎么切，如果從算法思想的角度來講的話就是……”
“就是分而治之的思想！” 小明趕緊把他知道的名詞搶先回答出來，生怕別人不知道他學過算法。
“哎呀，可以呀小明，看來你算法學得不錯嘛。所以這個 mini-vue 庫對于想學習源碼的同學來講非常有意義，現(xiàn)在作者已經完成了三大模塊的編寫了?！?/span>
“噢？三大模塊是啥？我這還真不知道”
“三大模塊是指 reactivity（響應式模塊）、runtime-core（運行時模塊）、compiler（編譯模塊）， Vue3 的核心就是這三大模塊。現(xiàn)在 Vue3 的源碼是采用 monorepo 的形式， 分了好多模塊，不過對于你這初學者來講，研究透三大模塊就夠你面試用了”
"哦了哦了，我這就去把 mini-vue clone 下來好好學習學習，回頭面試的時候爭取搞定面試官！哥，那我學習 mini-vue 遇見問題的話可還得麻煩你呀，哈哈哈~"
“你可以直接加 mini-vue 作者的微信，我們都叫他大崔哥。有問題直接問他就好了嘛 ，我有問題也是直接問他， 關于 mini-vue 上的問題他會回答你的，放心好了”
↑掃碼添加 mini-vue 作者 大崔哥 微信↑
"我這就趕緊加上大崔哥哈哈哈~開心"