由于工作中经常使用
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
这个钩子函数中。
最后,我们回过头来再看这张图片,是不是对整个生命周期的流程清晰多了呢?
未完待续…
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101136.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...