由于工作中经常使用 chrome 调试工具来定位问题，觉着这东西真的挺好用。突然有一天受到启发，想着：“我学习源码是否也可以通过调试工具呢？”因此，诞生了这篇文章来记录我的一些学习成果，后续应该会写成一个系列。
阅读源码的一些常见方式
这里列举一些阅读源码的一些常见方式：
直接从 github 上查看某一个版本的源码，针对某些功能的实现进行剖析
从第一个 commit 开始看
上面是我所知的一些阅读源码的常见方式，但是以上两种方式，无论是哪一种，都需要对 flow 稍微熟悉一些，不然看着多别扭（当然啦，如果你直接下载源码到本地转码以后慢慢看，那只能当我没说）；同时，从第一个 commit 开始看的话未免太消磨时间，相信在座的各位都不是很愿意。
那使用 chrome 调试工具看源码都有啥优点呢？
chrome 调试工具里的代码都是经过转码的，阅读成本相对较低
打下断点之后可以清晰的看到某个功能的实现步骤，跟直接阅读源码相比，不用来回切换文件夹，从而能更加集中自己的注意力
进入正题
说起 Vue，首先必不可少的就是讲 Vue 的生命周期了，不仅是面试的时候经常会被问到这个问题，开发的时候也经常会在生命周期这里遇到一些坑
执行顺序
Vue 中常见的生命周期及对应顺序：beforeCreate —> created —> beforeMount —> mounted —> beforeDestroy —> destroyed，官网有张则很清晰的描绘了这个过程：
接下来让我们在上面对应的钩子函数里打下一个断点 我们可以发现，beforeCreate —> created —> beforeMount —> mounted 这几个钩子函数都是挨个执行的，文档诚不我欺！但是细心的同学可以发现，beforeCreate 这个钩子函数居然执行了两次！为什么？是 Vue 的 bug 吗？显然不是！通过两次执行，我们可以看到两次 vm 对象是由不同的构造函数 new 出来的，一个是 Vue，另外一个则是 VueComponent 通过观察右边的调用堆栈可以发现的确是存在 VueComponent 这个构造函数的，具体是用来干嘛的我们先不深究。怎么去定位到这个问题呢？首先先在 VueComponent 这里打下一个断点，重新刷新浏览器并查看右边的调用堆栈
原来，两次 beforeCreate 钩子函数分别是 Vue 本身和 VueRouter 执行的（终于破案了 …)
除了这几个钩子函数以外，还有 beforeDestroy 跟 destroyed 这两个钩子，顾名思义，应该是页面销毁的时候才会执行，所以我们在上面打了断点进去也没有看到这两个钩子触发了。另外还有 beforeUpdate 跟 updated 两个钩子，字面意思就是“更新前”与“更新后”嘛。同样，上面的断点也没有在这里停下来。为了验证它们之间的执行顺序，我在这个项目里面加了几句代码：
data () {
return {
lists: [1, 2, 3, 4]
}
},
methods: {
handleClick () {
let len = this.lists.length
this.lists.push(this.lists[len – 1] + 1)
}
}
然后刷新页面，点击这个按钮可以看到执行了 beforeUpdate 钩子，放开这个断点以后，页面数据刷新，断点停在了 updated 这个钩子函数中。
最后，我们回过头来再看这张图片，是不是对整个生命周期的流程清晰多了呢？未完待续 …