詳細介紹如何科學的讀vue - 授人以漁

若是對您有幫助，請必定幫忙點個star，讓我有更大的動力繼續分享，若是您要轉載，務必補上個人github地址，謝謝兄dei
原發佈於我的github倉庫：https://github.com/screetBloom/wecat.js

vue絕不疑問是咱們寫框架時借鑑的核心，可是據我觀察，其實不少人是不會讀這種成熟的庫、框架的，因此在這裏先和你們說一下如何讀vue

科學讀vue，授人以漁？element UI爲何取名element？

接下來咱們會具體的回答這兩個問題。
毫無疑問，任何東西在剛起步的時候都是很是簡單，固然也包括Vue，並且一開始的代碼更能清晰的展現出來最一開始做者的思路


我相信當你讀vue源代碼的時候，確定也遇到過和我同樣的問題，vue從2014年中後期大規模被使用以來，歷時4年了。目前高度解耦的代碼我是感受很很差讀的，不少時候咱們都是看別人的博客和理解來讀vue源碼，不只片面還都喜歡互相抄襲
其實，咱們本身也是能夠嘗試徹底靠本身來理解vue的，不用去看某些人云亦云的博客
然而當咱們嘗試去讀源碼，當咱們打開vue.js,你會看到



這裏你會發現，即便你選"0.10"的branches，但願獲取早期版本源碼，那裏面的代碼也已是中後期很系統的代碼了，那麼如何從最最最初期的代碼讀起呢？
這個時候咱們想到了commit，只要尤雨溪推代碼，每次commit都會被記錄下來，而在github上如何在當前倉庫展現特定的某次commit呢？好比第一次的commit
這個我先和你們說一下，github保存commit時是用的40位的hash值來標誌某一次commit，呈如今瀏覽器上的url是這樣子的：

https://github.com/vuejs/vue/tree/83fac017f96f34c92c3578796a7ddb443d4e1f17
// 也能夠用7位hash來訪問，如
https://github.com/vuejs/vue/tree/83fac01

url格式是：倉庫地址+'/tree/hash值'，那麼咱們只要得到commit的hash值，就能夠讀到vue從第一個提交到如今的全部版本的代碼，不會有任何遺漏
其實上述的url就是vue第一次提交的源代碼，咱們看圖，注意標註的第一次提交：

那麼如今的問題就來了，如何獲取到每一次vue項目提交的commit的hash值呢？既然是github，很明顯的須要藉助git命令
方法以下：

• git clone下來
• 在項目目錄打開 控制檯，輸入「git log --oneline --decorate --graph --all」，來查看全部commit，你會發現有很是多的commit，遠遠大於github上統計的數字。能夠輸入10萬直接翻到最後一個「83fac017」，那咱們如今開始看看歷史上的第一個版本的hash，而後在瀏覽器中輸入https://github.com/vuejs/vue/... 在github上查看
• 查看對應的head 的hash值，修改tree後面的值訪問便可，咱們找幾個提交的代碼來看看(test目錄都是測試代碼，能夠不看)

// 看看第一次提交的代碼，目錄結構有好幾個，可是主要代碼就main.js裏的一句
module.exports = 123
// 咱們再看看第三次提交的代碼，很明顯的src目錄裏已經有了三個文件directives.js、filters.js、main.js；這部分能夠本身去看
// 咱們重點看一下目錄'explorations/getset.html'
var app = new Element('test', {
    msg: 'hello'
})

有沒有想到餓了嗎前端爲何將本身的UI組件庫取名"element UI",猜的不錯的話，一方面應該是致敬vue；
從中咱們也很明顯看得出來，他們很早之前就知道這個方法來查看vue的歷史版本，可是遺憾的是，網上不多有"授人以魚不如授人以漁"的作法，沒人去說如何合理的去看源代碼，大量充斥的都是對源碼理解的相互抄襲
到這裏，如何科學的讀vue就結束了，讀vue使用這種方法，讀react呢？還有之後讀各類庫呢？

再次但願，若是對您有幫助，請必定幫忙點個star，讓我有更大的動力繼續分享，https://github.com/screetBloom/wecat.js