小提示
剛開始看源碼的時(shí)候，一定不要揪著每行代碼去看搬味，一定要不求甚解境氢，先順著一條主線去捋清思路蟀拷，然后再根據(jù)自己的理解，分析一些重要的實(shí)現(xiàn)萍聊。不然就會(huì)陷入迷茫问芬，欸，這行干嘛的寿桨，啊此衅，這行也不知道。算了亭螟，不看了挡鞍。
舉個(gè)vue的例子，都知道vue是根據(jù)數(shù)據(jù)狀態(tài)變化后预烙，產(chǎn)生virtual DOM的方式更新DOM墨微，那么如果你不清楚virtual DOM的實(shí)現(xiàn)原理，那就不要去細(xì)究virtual DOM的內(nèi)容扁掸∏滔兀可以先往下梳理思路。
目錄分析
vue源碼是托管在github上的也糊，大家可以自己去找炼蹦。雖然目前vue都更新到3.0了，但2.0目前畢竟是主流狸剃，而且大家使用較多，也方便大家去理解具體的思路狗热。所以本次源碼采用的是vue2.6.9钞馁。
相信很多人跟我一樣，第一次看到vue源碼目錄的時(shí)候匿刮，都感覺頭大僧凰。大部分文件夾都不知道是干嘛用的。一般我們會(huì)從package.json文件中看起熟丸。
package.json主要看scripts 字段和 devDependencies 以及 dependencies 字段训措，通過(guò) scripts 字段我們可以知道項(xiàng)目中定義的腳本命令。通過(guò) devDependencies 和 dependencies 字段我們可以了解項(xiàng)目的依賴情況光羞。
vue是采用rollup打包的绩鸣，rollup是類似于webpack的打包工具，但比webapck更為輕量級(jí)纱兑，缺點(diǎn)是rollup只對(duì)js生效呀闻，并不像webpack還可以對(duì)圖片、css打包潜慎。
如果項(xiàng)目有依賴項(xiàng)的話捡多，我們可以運(yùn)行npm i安裝依賴蓖康。再根據(jù)script的命令去查找運(yùn)行路徑。
當(dāng)然一般優(yōu)秀的項(xiàng)目都會(huì)有貢獻(xiàn)規(guī)則文檔垒手，里面描述的很清晰蒜焊。Vue也不例外：https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md，在這個(gè)文檔里說(shuō)明了一些行為準(zhǔn)則科贬，PR指南泳梆，Issue Reporting 指南，Development Setup 以及 項(xiàng)目結(jié)構(gòu)唆迁。通過(guò)閱讀這些內(nèi)容鸭丛，我們可以了解項(xiàng)目如何開始，如何開發(fā)以及目錄的說(shuō)明唐责，下面是對(duì)重要目錄和文件的簡(jiǎn)單介紹鳞溉，這些內(nèi)容你都可以去自己閱讀獲取：
├── build --------------------------------- 構(gòu)建相關(guān)的文件鼠哥，一般情況下我們不需要?jiǎng)?├── dist ---------------------------------- 構(gòu)建后文件的輸出目錄
├── examples ------------------------------ 存放一些使用Vue開發(fā)的應(yīng)用案例
├── flow ---------------------------------- 類型聲明熟菲，使用開源項(xiàng)目 [Flow](https://flowtype.org/)
├── package.json -------------------------- 不解釋
├── test ---------------------------------- 包含所有測(cè)試文件
├── src ----------------------------------- 這個(gè)是我們最應(yīng)該關(guān)注的目錄，包含了源碼
│ ├── runtime--------------------------- 包含了不同的構(gòu)建或包的入口文件
│ │ ├── web-runtime.js ---------------- 運(yùn)行時(shí)構(gòu)建的入口朴恳，輸出 dist/vue.common.js 文件抄罕，不包含模板(template)到render函數(shù)的編譯器，所以不支持 `template` 選項(xiàng)于颖，我們使用vue默認(rèn)導(dǎo)出的就是這個(gè)運(yùn)行時(shí)的版本呆贿。大家使用的時(shí)候要注意
│ │ ├── web-runtime-with-compiler.js -- 獨(dú)立構(gòu)建版本的入口，輸出 dist/vue.js森渐，它包含模板(template)到render函數(shù)的編譯器
│ │ ├── web-compiler.js --------------- vue-template-compiler 包的入口文件
│ │ ├── web-server-renderer.js -------- vue-server-renderer 包的入口文件
│ ├── compiler -------------------------- 編譯器代碼的存放目錄做入，將 template 編譯為 render 函數(shù)
│ │ ├── parser ------------------------ 存放將模板字符串轉(zhuǎn)換成元素抽象語(yǔ)法樹的代碼
│ │ ├── codegen ----------------------- 存放從抽象語(yǔ)法樹(AST)生成render函數(shù)的代碼
│ │ ├── optimizer.js ------------------ 分析靜態(tài)樹，優(yōu)化vdom渲染
│ ├── core ------------------------------ 存放通用的同衣，平臺(tái)無(wú)關(guān)的代碼
│ │ ├── observer ---------------------- 反應(yīng)系統(tǒng)竟块，包含數(shù)據(jù)觀測(cè)的核心代碼
│ │ ├── vdom -------------------------- 包含虛擬DOM創(chuàng)建(creation)和打補(bǔ)丁(patching)的代碼
│ │ ├── instance ---------------------- 包含Vue構(gòu)造函數(shù)設(shè)計(jì)相關(guān)的代碼
│ │ ├── global-api -------------------- 包含給Vue構(gòu)造函數(shù)掛載全局方法(靜態(tài)方法)或?qū)傩缘拇a
│ │ ├── components -------------------- 包含抽象出來(lái)的通用組件
│ ├── server ---------------------------- 包含服務(wù)端渲染(server-side rendering)的相關(guān)代碼
│ ├── platforms ------------------------- 包含平臺(tái)特有的相關(guān)代碼
│ ├── sfc ------------------------------- 包含單文件組件(.vue文件)的解析邏輯，用于vue-template-compiler包
│ ├── shared ---------------------------- 包含整個(gè)代碼庫(kù)通用的代碼
大概了解了重要目錄和文件之后耐齐，我們就可以查看 Development Setup 中的常用命令部分浪秘，來(lái)了解如何開始這個(gè)項(xiàng)目了，我們可以看到這樣的介紹：
# watch and auto re-build dist/vue.js
$ npm run dev
# watch and auto re-run unit tests in Chrome
$ npm run dev:test
現(xiàn)在埠况，我們只需要運(yùn)行 npm run dev 即可監(jiān)測(cè)文件變化并自動(dòng)重新構(gòu)建輸出 dist/vue.js耸携，然后運(yùn)行 npm run dev:test 來(lái)測(cè)試。不過(guò)為了方便询枚，我會(huì)在 examples 目錄新建一個(gè)例子违帆，然后引用 dist/vue.js 這樣，我們可以直接拿這個(gè)例子一邊改Vue源碼一邊看自己寫的代碼想怎么玩怎么玩金蜀。
