详细介绍如何科学的读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