前言
相信不少同學都有歐陽這種情況，年初的時候給自己制定了一份關於學習英語和原始碼的詳細年度計劃。但是到了實際執行的時候因為各種情況制定的計劃基本都沒有完成，年底回顧時發現年初制定的計劃基本都沒完成。痛定思痛，第二年年初決定再次制定一份學習英語和原始碼的詳細年度計劃，毫無疑問又失敗了。
經過多年的摸索，對於如何檢視原始碼歐陽終於有了一些自己的心得。有的同學還想問英語有什麼心得沒，不要問，再問歐陽哭給你看。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
一看原始碼就頭暈
網上有一種說法是從頭開始看，假如原始碼是一個線團，那麼找到線團的頭子，順著頭子向下捋就能將原始碼瞭解的七七八八了。
這種方法對於檢視小專案的原始碼是沒有問題，因為小專案的分支邏輯不多，複雜度也不高，順著線團的頭子向下捋確實能夠搞清楚整個專案。
但是對於vue這種大型專案就不適用了，大型專案裡面的分支邏輯特別多，而且每個分支的複雜度也很高。大型專案的原始碼就像是一棵樹，那麼我們找的線團的頭子只是這棵樹的根節點。
看原始碼的時候你從樹的根節點向下走，下面有多個子節點。選了一個子節點接著向下走，結果發現這個子節點下面又有多個子節點。再次選了一個子節點向下走，結果發現還是有很多子節點，重複幾次後你可能就把自己給搞的頭暈了。
出現這個問題的原因是你檢視原始碼的時候沒有一個明確的目標，因為大型專案的原始碼分支流程是超級多的。沒有明確的目標一頭扎進原始碼中就會迷失在原始碼的海洋中，這個明確的目標就是我們檢視vue原始碼要搞清楚的問題。
如何接手一個複雜的新專案
想想你平時接手一個不熟悉並且很複雜的新專案你會怎麼辦？
我的做法是先檢視專案的README.md，瞭解專案是如何執行起來的。
然後再檢視專案的目錄，對整個專案的結構有一點了解。
接著就是找到了解專案的測試或者產品，讓他給我講講專案的大體流程和重要概念，這個時候可能聽不懂或者聽了就忘了，沒關係，有個印象就可以了。
最後就是接到專案的迭代需求，從需求對應的程式碼出發開始瞭解專案。等需求做得足夠多時，基本就將整個專案的程式碼過了一遍，此時我們已經完全接手這個專案了。
像接手新專案一樣搞清楚原始碼
我們這裡以vue舉例，vue其實也是一個普通的js專案。本質上和我們的工作中接手的新專案沒什麼區別，對於檢視vue原始碼我們也可以複用上面這個套路。
第一步：檢視contributing.md檔案
檢視原始碼的contributing.md檔案，這個檔案就像是我們專案中的README.md。開源專案希望更多的人參與進來所以一般都會有個contributing.md檔案。這個檔案裡面會教你原始碼專案是如何跑起來，專案結構是什麼樣的，怎麼參與進來開發。
第二步：檢視原始碼結構
第二步和接手新專案是一樣的，檢視vue原始碼的目錄，讓你對整個vue原始碼的結構有一些瞭解。
第三步：對原始碼大體流程和重要概念有初步印象
到了第三步就有問題了，不可能叫尤大充當測試或者產品的角色過來給我講vue的大體流程和重要概念吧？此時我們可以換個思路，網上有很多講解vue原始碼的文章或者書籍。可以讓這些原始碼文章或者書籍充當測試和產品的角色。透過閱讀這些vue原始碼文章或者書籍，你就能對vue的大體流程和重要概念有了初步的印象。
網上的文章都參差不齊，如何挑選出優質文章呢？
以掘金為例，你就在掘金上面去搜尋vue原始碼。然後找出時間最近的，點贊和收藏最多的文章，這樣找出來的文章基本都是優質且未過時文章（牆裂推薦歐陽的vue原始碼文章）。
當然如果你在之前沒有接觸過vue原始碼，第一次看vue原始碼文章或者書籍可能看不懂或者比較吃力。沒關係，我們這一步只是讓你對vue原始碼有個初步的印象就可以了。
第四步：帶著問題去debug原始碼
直到這一步之前我們所做的事情都是讓自己對原始碼有個大致的印象，最終想要看得懂原始碼還是得要自己上手去debug。
做專案時我們是透過不斷的做業務需求，從而瞭解整個專案。在vue原始碼這裡就是從一個你想要了解的具體問題出發，透過debug除錯vue原始碼將這個問題搞清楚。這個問題就是我們在檢視原始碼時的目標，和這個問題不相關的原始碼全部都忽略。
這種情況你帶著問題去debug檢視原始碼，此時的原始碼對於你來說就不是一棵樹了，而是圍繞著這個問題的一條線。我們的目標也很單純，只是將這條線上面的原始碼搞清楚就行了。當你把這個問題搞清楚了後，在你的腦子裡面關於vue原始碼就有一條線了。
還有一個進階玩法，將“透過debug原始碼把某個問題搞清楚的過程”用自己的話說出來，這就形成了一篇優秀的原始碼文章，歐陽的所有原始碼文章都是這樣寫出來的。
每個問題在我們腦子裡都是一條關於vue原始碼的一條線，當我們搞清楚足夠多問題時，這些線連到一起就形成了一棵vue原始碼樹。
看到這裡有的小夥伴就有疑問了，那麼問題又從哪裡來啊？
我們每天寫程式碼就在用vue，vue提供了很多黑魔法，難道你對這些黑魔法不感興趣嗎？
舉個例子，在vue的文件中有寫defineProps是一個宏函式。所以我們使用他的時候不需要從vue中import匯入，那麼你有沒有好奇過為什麼他不需要從vue中import匯入呢？
為了搞清楚這個問題，我們需要先找到線團的線頭子。而這個線頭子毫無疑問就是@vitejs/plugin-vue外掛，vue檔案就是由這個外掛處理的。給這個線頭子打上斷點，順著斷點向下走，只關心和defineProps相關的程式碼。最終我們就找到在一個compileScript函式中，會將原始碼中的defineProps宏函式給remove掉，並且同時會生成一個props屬性，由於defineProps宏函式經過編譯後已經被remove掉了，所以就不需要從vue中import匯入。
我們知道vue是一個編譯時和執行時同時存在的框架，編譯時說白了就是程式碼執行在nodejs階段，執行時程式碼跑在在瀏覽器中。所以在debug原始碼的時候有時是在編譯時進行，有時是在執行時進行。
在接下來的文章中我們會給你講一些編譯時和執行時debug原始碼的小技巧，如果你有更好用的技巧歡迎在評論區留言。
編譯時debug原始碼小技巧
想要在編譯時debug原始碼，首先我們需要啟動一個debug終端。這裡以vscode舉例，開啟終端然後點選終端中的+號旁邊的下拉箭頭，在下拉中點選Javascript Debug Terminal就可以啟動一個debug終端。
在debug終端執行對應的啟動命令，比如yarn dev，斷點將會停留在我們打斷點的程式碼處。此時會有這樣一排操作按鈕，如下圖：
上面的一排操作按鈕歐陽平時debug原始碼時一般就使用了前四個，分別是：Continue（繼續）、Step Over（單步跳過）、Step Into（單步除錯）、Step Out（單步跳出）。
-
第一個按鈕Continue（繼續）：點選這個按鈕後會讓程式碼執行到下一個斷點。
-
第二個按鈕Step Over（單步跳過）：執行到下一條語句，如果下一條語句是函式，不會走進函式內部。
-
第三個按鈕Step Into（單步除錯）：執行到下一條語句，如果下一條語句是函式，將會走進函式內部。
-
第四個按鈕Step Out（單步跳出）：跳出當前函式內部，斷點將會走到外部呼叫當前函式的地方。
不一定每個問題你都能找到對應的線頭子，這時你就不知道從哪裡開始打斷點了。比如還是defineProps宏函式，假如你不知道應該從@vitejs/plugin-vue外掛開始打斷點，那這種情況我們應該怎麼辦呢？
答案很簡單，在原始碼中去搜尋defineProps關鍵字，將搜尋到的結果都打上斷點。然後啟動專案，發現程式碼走進了我們打的斷點中，如下圖：
此時左側的Call Stack呼叫棧就能派上用場了，他裡面存了當前函式的所有呼叫棧。比如當前斷點是停留在processDefineProps函式中，從Call Stack呼叫棧我們就能知道這個函式就是由compileScript呼叫的，而compileScript函式又是由resolveScript函式呼叫的。並且可以透過點選函式名就可以跳轉到對應的函式中，並且恢復當時的上下文。
整個Call Stack呼叫棧是一條線，我們要找的問題的線頭子就在這條線中。我們帶著問題去debug原始碼的時候只需要將在Call Stack呼叫棧中，線頭子後面的一系列函式邏輯搞清楚就行了。
執行時debug原始碼小技巧
大家都知道vue檔案經過編譯後會變成js檔案，那麼如何找到編譯後的js檔案給他打上斷點呢？
很簡單在network皮膚中找到對應的請求，這裡我想找的是index.vue檔案。然後右鍵，在彈出的選單中選擇第一個Open In Sources Panel。瀏覽器將會切換到source皮膚中，並且自動開啟編譯後的index.vue檔案，然後我們就可以在這個檔案中給對應的程式碼打斷點。
關於Continue、Step Over這幾個按鈕，還有Call Stack呼叫棧都是和編譯時是一樣的，在這裡我們就不贅述了，歡迎補充其他小技巧。
總結
大型專案的原始碼可以理解為是一棵樹，如果我們直接從樹的根節點開始去看原始碼肯定會被原始碼的各種分支邏輯搞的頭暈。此時我們可以換個思路，按照以下四步去檢視原始碼：
-
檢視原始碼的
contributing.md檔案，這個檔案裡面會教你原始碼專案是如何跑起來，專案結構是什麼樣的，怎麼參與進來開發。 -
透過檢視原始碼目錄讓你對原始碼結構有個初步的印象。
-
透過檢視原始碼文章或者書籍讓你對原始碼大體流程和重要概念有初步印象。
-
帶著你想要了解的問題去debug除錯原始碼，和問題不相關的原始碼全部忽略掉。此時的原始碼就不再是一棵樹，而是一條線，我們只需要將這條線的原始碼搞清楚就行了。當我們搞清楚足夠多問題時，這些線將會匯聚成一棵樹。
關注公眾號：【前端歐陽】，給自己一個進階vue的機會
