寫在前面
文章特點
- 超級詳細 - 逐行級別的分析
所謂逐行并非一行接著一行,逐行指的是講解的詳細程度,這套文章將致力于覆蓋所有核心代碼,畢竟每一句代碼都有他存在的意思,假如我們不講明白任何一句代碼的意義,那又怎么敢說是源碼分析呢?
- 實時更新 - 與
Vue
源碼dev
分支保持同步
這套文章的特點之一就是永遠不會過時,因為我們會跟隨 Vue
源碼 dev
分支的腳步更新文章的內容,這對于讀者的好處是學習的總是最新的。(注:有的時候 dev
分支的更新到文章的更新會有稍許延遲)。
這里要解釋一下,有的時候我們在講解一個文件的代碼時,你會發現,有些內容我們并沒有進行講解,那是因為這部分內容可能與本節的主題無關,但這些內容絕對不會被遺漏,它們會被放到合適的地方進行講解
- 深度分析 - 講解issue
我們知道 Vue
這個項目自誕生以來一直都在不斷的更新完善,比如添加新的特性,修復已知bug等等。而在這個過程中源碼也將越來越完善,這也意味著代碼曾經并不完善,本套文章在分析源碼時除了告訴你這段代碼為什么這么寫之外,還會根據相關 issue
分析這段代碼之前是怎么寫的以及存在的問題。
為什么要閱讀源碼?
如果你要問我這個問題,我會反問你:為什么要讀書(技術書)?不知道你對這句話怎么看:源碼難道不是更精華的書嗎?
你應該了解的
文章將會盡可能詳細,且盡可能對基礎的知識點進行講解,但需要太多口舌的東西即使再基礎也不會去講,這里列出我希望你在閱讀該系列文章前最好了解的東西:
由于 Vue 的源碼采用 ES6,所以你至少應該掌握 ES6 才能看得懂,其次你最好對 package.json
中的字段的作用有所了解。由于 Vue 使用 Rollup
構建,所以你不了解 Rollup
的話,你就看不懂 Vue 的構建配置,最后 Vue 采用 flow
做類型系統,最起碼就應該知道 flow
的簡單語法,否則會影響你看源碼。
推薦閱讀這套文章的方式
既然是閱讀源碼,沒有源碼怎么讀?所以你要使用你喜歡的方式拿到源碼才行,最簡單的方式是,clone 一份源碼到你的本地。如果你不想這么做,你可以安裝一個 chrome
的擴展程序,使得你能夠以在線資源管理器的方式閱讀GitHub倉庫的代碼,我常用的 chrome
擴展是:octotree,類似的擴展還有很多,你喜歡就好。
一點補充
有的同學可能會有疑問,比如:你又不是作者本人,你怎么知道人家的代碼為什么那么寫、Vue.js又不是你寫的,誰知道你分析的對不對 等等。
對于第一個問題我想說的是,你們的懷疑是對的,畢竟最有權威分析 Vue
源碼的人必然是作者本身,但同學們要知道作者(小右)才沒有時間來給大家寫一套源碼分析的文章。對于第二個問題,Vue
確實不是我寫的,但為了證明這套文章還是稍微有點質量的,在這里我把看源碼過程中提過的一些 PR
貼在下面,也證明我確實對 Vue
有些粗淺的理解。
- https://github.com/vuejs/vue/pull/7981
- https://github.com/vuejs/vue/pull/6795
- https://github.com/vuejs/vue/pull/7875
- https://github.com/vuejs/vue/pull/6833
- https://github.com/vuejs/vue/pull/7308
- https://github.com/vuejs/vue/pull/7762
- https://github.com/vuejs/vue/pull/7510
- https://github.com/vuejs/vue/pull/8734
說實話,上面的 PR
都是些微不足道的,因為寫文章需要大量的時間,隨著這些文章的完成,我很希望抽出時間做一些實質性的貢獻。