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

栏目: JavaScript · 发布时间: 6年前

内容简介:由于工作中经常使用这里列举一些阅读源码的一些常见方式:上面是我所知的一些阅读源码的常见方式,但是以上两种方式,无论是哪一种,都需要对

由于工作中经常使用 chrome 调试 工具 来定位问题,觉着这东西真的挺好用。突然有一天受到启发,想着:“我学习源码是否也可以通过调试工具呢?” 因此,诞生了这篇文章来记录我的一些学习成果,后续应该会写成一个系列。

阅读源码的一些常见方式

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

github
commit

上面是我所知的一些阅读源码的常见方式,但是以上两种方式,无论是哪一种,都需要对 flow 稍微熟悉一些,不然看着多别扭(当然啦,如果你直接下载源码到本地转码以后慢慢看,那只能当我没说);同时,从第一个 commit 开始看的话未免太消磨时间,相信在座的各位都不是很愿意。

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

chrome

进入正题

说起 Vue ,首先必不可少的就是讲 Vue 的生命周期了,不仅是面试的时候经常会被问到这个问题,开发的时候也经常会在生命周期这里遇到一些

执行顺序

Vue 中常见的生命周期及对应顺序: beforeCreate —> created —> beforeMount —> mounted —> beforeDestroy —> destroyed ,官网有张则很清晰的描绘了这个过程:

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

接下来让我们在上面对应的钩子函数里打下一个断点

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

我们可以发现, beforeCreate —> created —> beforeMount —> mounted 这几个钩子函数都是挨个执行的,文档诚不我欺!

但是细心的同学可以发现,beforeCreate这个钩子函数居然执行了两次!为什么?是Vue的bug吗?显然不是!

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

通过两次执行,我们可以看到两次vm对象是由不同的构造函数new出来的,一个是Vue,另外一个则是VueComponent

通过观察右边的调用堆栈可以发现的确是存在VueComponent这个构造函数的,具体是用来干嘛的我们先不深究。怎么去定位到这个问题呢?首先先在VueComponent这里打下一个断点,重新刷新浏览器并查看右边的调用堆栈

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

原来,两次 beforeCreate 钩子函数分别是 Vue 本身和 VueRouter 执行的(终于破案了...)

除了这几个钩子函数以外,还有 beforeDestroydestroyed 这两个钩子,顾名思义,应该是页面销毁的时候才会执行,所以我们在上面打了断点进去也没有看到这两个钩子触发了。

另外还有 beforeUpdateupdated 两个钩子,字面意思就是“更新前”与“更新后”嘛。同样,上面的断点也没有在这里停下来。为了验证它们之间的执行顺序,我在这个项目里面加了几句代码:

data () {
    return {
        lists: [ 1, 2, 3, 4 ]
    }
},
methods: {
    handleClick () {
        let len = this.lists.length

        this.lists.push(this.lists[len - 1] + 1)
    }
}

然后刷新页面,点击这个按钮可以看到执行了 beforeUpdate 钩子,放开这个断点以后,页面数据刷新,断点停在了 updated 这个钩子函数中。

最后,我们回过头来再看这张图片,是不是对整个生命周期的流程清晰多了呢?

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

未完待续...


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Convergence Culture

Convergence Culture

Henry Jenkins / NYU Press / 2006-08-01 / USD 30.00

"Convergence Culture" maps a new territory: where old and new media intersect, where grassroots and corporate media collide, where the power of the media producer, and the power of the consumer intera......一起来看看 《Convergence Culture》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试