作為一個小白如何讀vue的源碼?

01-11

作為一個前端小白，之前從原生、jQuery、vuejs到現在使用vue-cli開發項目，現在想讀一讀vue的源碼卻不得其解，之前沒有讀過其他框架的源碼，有點摸不著頭腦，希望有內功高手指點一二.(補充：我不是來搗亂的，與《為什麼只會Vue的都是前端小白？》無關，站邊尤大)

https://github.com/answershuto/learnVue

我們公司的技術棧是Vue（全托 @小芋頭君頭哥的福），抱著想深入學習的心態最近也在讀vue源碼，給它加了些注釋以及寫了學習心得，希望可以幫助到你。

讀源碼之前，你需要掌握一些基本原理，這樣可以讓你更快地理解源碼。可以先從響應式原理入手，讀懂響應式的原理。

answershuto/learnVue

然後學習依賴收集，明白Vue對數據雙向綁定的整個過程。

answershuto/learnVue

到這裡你應該已經明白了Watcher、Dep等的作用，以及Vue是如何得知數據變化的時候修改試圖層，這也是Vue的核心所在。

接著你可以看一下這張圖。

這是從Vue官網拿下來的一張圖，比較清晰地展示了從數據綁定到觀察到修改視圖到整個過程。

首先說一下template解析成AST以及render function的過程，聊聊Vue的template編譯中已經講了這部分的內容，主要是通過正則等方式解析模板成為AST樹，然後會將AST樹編譯成render function，其中運用來緩存等優化方法都是值得一讀的。

接著從Data開始看，當數據Data發生變化時，會觸發setter，setter會觸發閉包中的Dep通知所有對該數據進行觀察的觀察者對象Watcher，Watcher會調用_update來更新視圖，_update的第一個參數是一個render函數，render 函數返回的是一個VNode節點。

新的VNode節點會與之前的VNode節點進行一個patch的過程，比較得出最小單位的修改，最後將這些修改渲染到真實DOM上。這個具體可以參考Virtual DOM與diff(Vue實現)。

這整個流程下來大致了解了，接下來就可以去讀源碼啦。

Vue的代碼模塊分得比較清晰，時間花下去好好理解學習，一定會有收穫。

閑暇的周六早上寫一點，希望對你有所幫助。

之前寫過一篇閱讀Vue源碼的文章：Vue2.1.7源碼學習，很榮幸被尤大( @尤雨溪 )在微博轉發。在文章中我提到了這樣一句話（紅圈）：

實際上，這篇文章是一篇從宏觀角度去看Vue源碼的一篇入門性的文章。如果有興趣可以看一看。

另外：我正在做一套關於Vue源碼的系列文章（可能會配有視頻哦~），有興趣的話可以關一下哈。

同時很高興你對Vue源碼有興趣，在學習Vue源碼之前我又一些經驗性的話：

你要學習的是Vue，而不僅僅是Vue源碼。

什麼意思？比如你覺得Vue的功能讓你覺得很神奇，那麼源碼也許能夠幫助你解開你的疑惑，這也是閱讀Vue源碼能夠得到的最最最基本的東西，除此之外我希望你還能學到：如何管理一個開源項目（這包括如何管理issue，PR，一個開源項目需要哪些東西才能讓人覺得靠譜）、測試（Vue源碼有單元測試、端對端測試等等，如果你想了解關於測試的東西，那對小白來講也許是一個實戰場所）、自動化和持續集成（如果你們公司的項目足夠專業，也許你能夠接觸到這些東西，但是如果沒有，這也是實戰場所）、最後一個就是Vue本身的思想（看源碼的時候多想一想為什麼這麼做？如果讓你做你會怎麼做？有沒有其他做法？）

當然以上內容並非學習Vue源碼才能學習的到，之所以拿Vue說是因為題主提到是Vue，而我也恰好稍微了解一點，希望你對有所幫助。

題外話：看樣子，題主對Vue很感興趣，但最近有些話題比較敏感，題主提了一些話還不如不提，希望題主在學習Vue源碼的過程中，能力能夠不斷提升自身實例，如果你真的熱愛某一項技術(比如Vue)，那麼最好的方式就是為社區做貢獻，通過你的努力解決別人口中不足的地方並貢獻給社區，這才是真愛。

（尬語一下：我曾經也寫過關於框架對比的文章，不過不是對比Vue和Angular哦~~，但是很快我就刪除了，從今以後也不會做這些無謂的對比，還是那句話，提升實力作出貢獻，就是真愛，題主好運。）

fork下vue源碼，從第一個commit開始看，逐步體會作者的想法，我這裡之前寫過一些vue源碼的解讀過程：https://github.com/monkeyWangs/javascript-

希望對你有幫助

個人認為Vue源碼最精華最有意義仔細研讀主要分為幾個部分(當然遠遠不止這些)

一個是observe模塊，在src/core/observe目錄下，主要講Vue如何通過發布訂閱模式，實現數據的響應化。看Vue源碼從這裡入手就好啦。

其次是compiler模塊，在src/compiler目錄下，主要講Vue如何把模版解析並渲染成DOM，以及指令的提取。

第三個是server模塊，在src/server目錄下，主要是Vue服務端渲染相關。這一塊我自己也沒看過，不做深入研討。不過可以@尤雨溪大佬解答。

可以看到上邊這張圖，不難看出最主要的部分就是Observer模塊和Directive模塊。Observer負責做數據層面的響應式及依賴收集。而Directive即compiler模塊下的部分，負責做指令解析和DOM渲染。搞懂這兩部分，就搞懂了Vue的一個框架思想。

拋磚引玉，自己了解的就大概這些。最近也在啃Vue源碼，也輸出了一些文檔，歡迎大佬們來我的博客一起指點探討。https://github.com/xingbofeng/xingbofeng.github.io/issues

被塞抹布我也要說，憋出內傷了：

把angular和react都學了就不是小白了！脫離了小白想看啥源代碼就看啥(逃

省省吧，你讀不了的。這就好比連高數都沒搞明白的人非要去讀廣義相對論的論文。

既然是小白，就先踏踏實實把手頭的工作做好。編程要一步步來，別以為讀過源碼就怎樣了，你現在讀了，還是小白