依据调试东西看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实行的（终究破案了&＃8230;)

除了这几个钩子函数之外，另有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这个钩子函数中。

末了，我们回过头来再看这张图片，是不是是对全部生命周期的流程清楚多了呢？

未完待续&＃8230;
扫描下方的二维码或搜刮「tony先生的前端补习班」关注我的微信民众号，那末就能够第一时刻收到我的最新文章。