根据调试工具看Vue源码之生命周期（一）

因为工做中常用 chrome调试工具来定位问题，觉着这东西真的挺好用。忽然有一天受到启发，想着：“我学习源码是否也能够经过调试工具呢？” 所以，诞生了这篇文章来记录个人一些学习成果，后续应该会写成一个系列。

阅读源码的一些常见方式

这里列举一些阅读源码的一些常见方式：

1. 直接从github上查看某一个版本的源码，针对某些功能的实现进行剖析
2. 从第一个commit开始看

上面是我所知的一些阅读源码的常见方式，可是以上两种方式，不管是哪种，都须要对flow稍微熟悉一些，否则看着多别扭（固然啦，若是你直接下载源码到本地转码之后慢慢看，那只能当我没说）；同时，从第一个commit开始看的话未免太消磨时间，相信在座的各位都不是很愿意。

那使用chrome调试工具看源码都有啥优势呢？

1. chrome调试工具里的代码都是通过转码的，阅读成本相对较低
2. 打下断点以后能够清晰的看到某个功能的实现步骤，跟直接阅读源码相比，不用来回切换文件夹，从而能更加集中本身的注意力

进入正题

提及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这个钩子函数中。

最后，咱们回过头来再看这张图片，是否是对整个生命周期的流程清晰多了呢？

未完待续...
扫描下方的二维码或搜索「tony老师的前端补习班」关注个人微信公众号，那么就能够第一时间收到个人最新文章。