前言

相信不少同學(xué)都有歐陽這種情況，年初的時(shí)候給自己制定了一份關(guān)于學(xué)習(xí)英語和源碼的詳細(xì)年度計(jì)劃。但是到了實(shí)際執(zhí)行的時(shí)候因?yàn)楦鞣N情況制定的計(jì)劃基本都沒有完成，年底回顧時(shí)發(fā)現(xiàn)年初制定的計(jì)劃基本都沒完成。痛定思痛，第二年年初決定再次制定一份學(xué)習(xí)英語和源碼的詳細(xì)年度計(jì)劃，毫無疑問又失敗了。

經(jīng)過多年的摸索，對于如何查看源碼歐陽終于有了一些自己的心得。有的同學(xué)還想問英語有什么心得沒，不要問，再問歐陽哭給你看。

一看源碼就頭暈

網(wǎng)上有一種說法是從頭開始看，假如源碼是一個(gè)線團(tuán)，那么找到線團(tuán)的頭子，順著頭子向下捋就能將源碼了解的七七八八了。

這種方法對于查看小項(xiàng)目的源碼是沒有問題，因?yàn)樾№?xiàng)目的分支邏輯不多，復(fù)雜度也不高，順著線團(tuán)的頭子向下捋確實(shí)能夠搞清楚整個(gè)項(xiàng)目。

但是對于vue這種大型項(xiàng)目就不適用了，大型項(xiàng)目里面的分支邏輯特別多，而且每個(gè)分支的復(fù)雜度也很高。大型項(xiàng)目的源碼就像是一棵樹，那么我們找的線團(tuán)的頭子只是這棵樹的根節(jié)點(diǎn)。

看源碼的時(shí)候你從樹的根節(jié)點(diǎn)向下走，下面有多個(gè)子節(jié)點(diǎn)。選了一個(gè)子節(jié)點(diǎn)接著向下走，結(jié)果發(fā)現(xiàn)這個(gè)子節(jié)點(diǎn)下面又有多個(gè)子節(jié)點(diǎn)。再次選了一個(gè)子節(jié)點(diǎn)向下走，結(jié)果發(fā)現(xiàn)還是有很多子節(jié)點(diǎn)，重復(fù)幾次后你可能就把自己給搞的頭暈了。

出現(xiàn)這個(gè)問題的原因是你查看源碼的時(shí)候沒有一個(gè)明確的目標(biāo)，因?yàn)榇笮晚?xiàng)目的源碼分支流程是超級多的。沒有明確的目標(biāo)一頭扎進(jìn)源碼中就會迷失在源碼的海洋中，這個(gè)明確的目標(biāo)就是我們查看vue源碼要搞清楚的問題。

如何接手一個(gè)復(fù)雜的新項(xiàng)目

想想你平時(shí)接手一個(gè)不熟悉并且很復(fù)雜的新項(xiàng)目你會怎么辦？

我的做法是先查看項(xiàng)目的README.md，了解項(xiàng)目是如何運(yùn)行起來的。

然后再查看項(xiàng)目的目錄，對整個(gè)項(xiàng)目的結(jié)構(gòu)有一點(diǎn)了解。

接著就是找到了解項(xiàng)目的測試或者產(chǎn)品，讓他給我講講項(xiàng)目的大體流程和重要概念，這個(gè)時(shí)候可能聽不懂或者聽了就忘了，沒關(guān)系，有個(gè)印象就可以了。

最后就是接到項(xiàng)目的迭代需求，從需求對應(yīng)的代碼出發(fā)開始了解項(xiàng)目。等需求做得足夠多時(shí)，基本就將整個(gè)項(xiàng)目的代碼過了一遍，此時(shí)我們已經(jīng)完全接手這個(gè)項(xiàng)目了。

像接手新項(xiàng)目一樣搞清楚源碼

我們這里以vue舉例，vue其實(shí)也是一個(gè)普通的js項(xiàng)目。本質(zhì)上和我們的工作中接手的新項(xiàng)目沒什么區(qū)別，對于查看vue源碼我們也可以復(fù)用上面這個(gè)套路。

第一步：查看contributing.md文件

查看源碼的contributing.md文件，這個(gè)文件就像是我們項(xiàng)目中的README.md。開源項(xiàng)目希望更多的人參與進(jìn)來所以一般都會有個(gè)contributing.md文件。這個(gè)文件里面會教你源碼項(xiàng)目是如何跑起來，項(xiàng)目結(jié)構(gòu)是什么樣的，怎么參與進(jìn)來開發(fā)。

第二步：查看源碼結(jié)構(gòu)

第二步和接手新項(xiàng)目是一樣的，查看vue源碼的目錄，讓你對整個(gè)vue源碼的結(jié)構(gòu)有一些了解。

第三步：對源碼大體流程和重要概念有初步印象

到了第三步就有問題了，不可能叫尤大充當(dāng)測試或者產(chǎn)品的角色過來給我講vue的大體流程和重要概念吧？此時(shí)我們可以換個(gè)思路，網(wǎng)上有很多講解vue源碼的文章或者書籍?？梢宰屵@些源碼文章或者書籍充當(dāng)測試和產(chǎn)品的角色。通過閱讀這些vue源碼文章或者書籍，你就能對vue的大體流程和重要概念有了初步的印象。

網(wǎng)上的文章都參差不齊，如何挑選出優(yōu)質(zhì)文章呢？

以掘金為例，你就在掘金上面去搜索vue源碼。然后找出時(shí)間最近的，點(diǎn)贊和收藏最多的文章，這樣找出來的文章基本都是優(yōu)質(zhì)且未過時(shí)文章（墻裂推薦歐陽的vue源碼文章）。

當(dāng)然如果你在之前沒有接觸過vue源碼，第一次看vue源碼文章或者書籍可能看不懂或者比較吃力。沒關(guān)系，我們這一步只是讓你對vue源碼有個(gè)初步的印象就可以了。

第四步：帶著問題去debug源碼

直到這一步之前我們所做的事情都是讓自己對源碼有個(gè)大致的印象，最終想要看得懂源碼還是得要自己上手去debug。

做項(xiàng)目時(shí)我們是通過不斷的做業(yè)務(wù)需求，從而了解整個(gè)項(xiàng)目。在vue源碼這里就是從一個(gè)你想要了解的具體問題出發(fā)，通過debug調(diào)試vue源碼將這個(gè)問題搞清楚。這個(gè)問題就是我們在查看源碼時(shí)的目標(biāo)，和這個(gè)問題不相關(guān)的源碼全部都忽略。

這種情況你帶著問題去debug查看源碼，此時(shí)的源碼對于你來說就不是一棵樹了，而是圍繞著這個(gè)問題的一條線。我們的目標(biāo)也很單純，只是將這條線上面的源碼搞清楚就行了。當(dāng)你把這個(gè)問題搞清楚了后，在你的腦子里面關(guān)于vue源碼就有一條線了。

還有一個(gè)進(jìn)階玩法，將“通過debug源碼把某個(gè)問題搞清楚的過程”用自己的話說出來，這就形成了一篇優(yōu)秀的源碼文章，歐陽的所有源碼文章都是這樣寫出來的。

每個(gè)問題在我們腦子里都是一條關(guān)于vue源碼的一條線，當(dāng)我們搞清楚足夠多問題時(shí)，這些線連到一起就形成了一棵vue源碼樹。

看到這里有的小伙伴就有疑問了，那么問題又從哪里來??？

我們每天寫代碼就在用vue，vue提供了很多黑魔法，難道你對這些黑魔法不感興趣嗎？

舉個(gè)例子，在vue的文檔中有寫defineProps是一個(gè)宏函數(shù)。所以我們使用他的時(shí)候不需要從vue中import導(dǎo)入，那么你有沒有好奇過為什么他不需要從vue中import導(dǎo)入呢？

為了搞清楚這個(gè)問題，我們需要先找到線團(tuán)的線頭子。而這個(gè)線頭子毫無疑問就是@vitejs/plugin-vue插件，vue文件就是由這個(gè)插件處理的。給這個(gè)線頭子打上斷點(diǎn)，順著斷點(diǎn)向下走，只關(guān)心和defineProps相關(guān)的代碼。最終我們就找到在一個(gè)compileScript函數(shù)中，會將源代碼中的defineProps宏函數(shù)給remove掉，并且同時(shí)會生成一個(gè)props屬性，由于defineProps宏函數(shù)經(jīng)過編譯后已經(jīng)被remove掉了，所以就不需要從vue中import導(dǎo)入。

我們知道vue是一個(gè)編譯時(shí)和運(yùn)行時(shí)同時(shí)存在的框架，編譯時(shí)說白了就是代碼運(yùn)行在nodejs階段，運(yùn)行時(shí)代碼跑在在瀏覽器中。所以在debug源碼的時(shí)候有時(shí)是在編譯時(shí)進(jìn)行，有時(shí)是在運(yùn)行時(shí)進(jìn)行。

在接下來的文章中我們會給你講一些編譯時(shí)和運(yùn)行時(shí)debug源碼的小技巧，如果你有更好用的技巧歡迎在評論區(qū)留言。

編譯時(shí)debug源碼小技巧

想要在編譯時(shí)debug源碼，首先我們需要啟動一個(gè)debug終端。這里以vscode舉例，打開終端然后點(diǎn)擊終端中的+號旁邊的下拉箭頭，在下拉中點(diǎn)擊Javascript Debug Terminal就可以啟動一個(gè)debug終端。

圖片

在debug終端執(zhí)行對應(yīng)的啟動命令，比如yarn dev，斷點(diǎn)將會停留在我們打斷點(diǎn)的代碼處。此時(shí)會有這樣一排操作按鈕，如下圖：

圖片

上面的一排操作按鈕歐陽平時(shí)debug源碼時(shí)一般就使用了前四個(gè)，分別是：Continue（繼續(xù)）、Step Over（單步跳過）、Step Into（單步調(diào)試）、Step Out（單步跳出）。

• 第一個(gè)按鈕Continue（繼續(xù)）：點(diǎn)擊這個(gè)按鈕后會讓代碼執(zhí)行到下一個(gè)斷點(diǎn)。
• 第二個(gè)按鈕Step Over（單步跳過）：執(zhí)行到下一條語句，如果下一條語句是函數(shù)，不會走進(jìn)函數(shù)內(nèi)部。
• 第三個(gè)按鈕Step Into（單步調(diào)試）：執(zhí)行到下一條語句，如果下一條語句是函數(shù)，將會走進(jìn)函數(shù)內(nèi)部。
• 第四個(gè)按鈕Step Out（單步跳出）：跳出當(dāng)前函數(shù)內(nèi)部，斷點(diǎn)將會走到外部調(diào)用當(dāng)前函數(shù)的地方。

不一定每個(gè)問題你都能找到對應(yīng)的線頭子，這時(shí)你就不知道從哪里開始打斷點(diǎn)了。比如還是defineProps宏函數(shù)，假如你不知道應(yīng)該從@vitejs/plugin-vue插件開始打斷點(diǎn)，那這種情況我們應(yīng)該怎么辦呢？

答案很簡單，在源碼中去搜索defineProps關(guān)鍵字，將搜索到的結(jié)果都打上斷點(diǎn)。然后啟動項(xiàng)目，發(fā)現(xiàn)代碼走進(jìn)了我們打的斷點(diǎn)中，如下圖：

圖片

此時(shí)左側(cè)的Call Stack調(diào)用棧就能派上用場了，他里面存了當(dāng)前函數(shù)的所有調(diào)用棧。比如當(dāng)前斷點(diǎn)是停留在processDefineProps函數(shù)中，從Call Stack調(diào)用棧我們就能知道這個(gè)函數(shù)就是由compileScript調(diào)用的，而compileScript函數(shù)又是由resolveScript函數(shù)調(diào)用的。并且可以通過點(diǎn)擊函數(shù)名就可以跳轉(zhuǎn)到對應(yīng)的函數(shù)中，并且恢復(fù)當(dāng)時(shí)的上下文。

整個(gè)Call Stack調(diào)用棧是一條線，我們要找的問題的線頭子就在這條線中。我們帶著問題去debug源碼的時(shí)候只需要將在Call Stack調(diào)用棧中，線頭子后面的一系列函數(shù)邏輯搞清楚就行了。

運(yùn)行時(shí)debug源碼小技巧

大家都知道vue文件經(jīng)過編譯后會變成js文件，那么如何找到編譯后的js文件給他打上斷點(diǎn)呢？

圖片

很簡單在network面板中找到對應(yīng)的請求，這里我想找的是index.vue文件。然后右鍵，在彈出的菜單中選擇第一個(gè)Open In Sources Panel。瀏覽器將會切換到source面板中，并且自動打開編譯后的index.vue文件，然后我們就可以在這個(gè)文件中給對應(yīng)的代碼打斷點(diǎn)。

關(guān)于Continue、Step Over這幾個(gè)按鈕，還有Call Stack調(diào)用棧都是和編譯時(shí)是一樣的，在這里我們就不贅述了，歡迎補(bǔ)充其他小技巧。

總結(jié)

大型項(xiàng)目的源碼可以理解為是一棵樹，如果我們直接從樹的根節(jié)點(diǎn)開始去看源碼肯定會被源碼的各種分支邏輯搞的頭暈。此時(shí)我們可以換個(gè)思路，按照以下四步去查看源碼：

• 查看源碼的contributing.md文件，這個(gè)文件里面會教你源碼項(xiàng)目是如何跑起來，項(xiàng)目結(jié)構(gòu)是什么樣的，怎么參與進(jìn)來開發(fā)。
• 通過查看源碼目錄讓你對源碼結(jié)構(gòu)有個(gè)初步的印象。
• 通過查看源碼文章或者書籍讓你對源碼大體流程和重要概念有初步印象。
• 帶著你想要了解的問題去debug調(diào)試源碼，和問題不相關(guān)的源碼全部忽略掉。此時(shí)的源碼就不再是一棵樹，而是一條線，我們只需要將這條線的源碼搞清楚就行了。當(dāng)我們搞清楚足夠多問題時(shí)，這些線將會匯聚成一棵樹。