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

根据调试工具看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执行的(终于破案了…)

除了这几个钩子函数以外,还有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这个钩子函数中。

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

未完待续…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101136.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深度学习在图像处理中的应用(tensorflow2.4以及pytorch1.10实现)

    深度学习在图像处理中的应用(tensorflow2.4以及pytorch1.10实现)本人在读研期间的研究方向是图像处理以及深度学习(主要是图像分类和目标检测)。在做深度学习时使用的是tensorflow深度学习框架,学习全是自学,很多资源都是在Github上找的。我发现现在Github上很多深度学习的开源项目都是用的tensorflow和pytorch框架。所以现在也开始学习pytorch框架,之前一直用的是tensorflow1.x版本,今年正好迎来了新的tensorlfow大…

  • 写出Oracle分页语句,Oracle分页语句

    写出Oracle分页语句,Oracle分页语句select*from(selectA.*,rownumrdfrom(select*from[tablename]where[condition]orderby[condition])Awhererownum<=[endpage*pagesize])whererd>=[startpage*pagesize];1.select*from…

  • 常用贴片器件正负极区分图_什么是贴片元件

    常用贴片器件正负极区分图_什么是贴片元件常用贴片器件正负极区分1、电容1.1、铝电解电容1.2、钽电容2、二极管2.1、贴片二极管2.2、直插二极管1、电容贴片电容是有正否之分的,常见的贴片电容有陶瓷电容、铝电解电容、钽电容,铝电解电容和钽电容都是分正负的,两个引脚但千万不能焊错,否则电容会爆掉。1.1、铝电解电容贴片铝电解电容电容的正负极区分,电容上面有标志的黑块为负极。1.2、钽电容极性贴片电容钽电容一般为黄色壳体,壳体一端有横杠,另一端没有横杠,有横杠的为正极,另一端为负极。如下图所示。2、二极管印制板中通过P

  • a4如何打印双面小册子_a4如何打印双面小册子[通俗易懂]

    a4如何打印双面小册子_a4如何打印双面小册子[通俗易懂]展开全部1、在Word中打开一篇文档,点击“文件”——“打印”菜单项,准备开始打印工作。2、弹出“32313133353236313431303231363533e4b893e5b19e31333433623230打印”对话框,在“打印机”名称框的左侧,点击“属性”按钮,点击此按钮,开始设置小册子打印。3、弹出打印机属性对话框,在“双面打印”部分,点击下拉菜单,选择“双面打印,短边“装订。(目…

  • linux 解压rar密码,linux下rar包的压缩与解压方案

    linux 解压rar密码,linux下rar包的压缩与解压方案方法一:yuminstallunrar方法二:下载地址:以最新的为准。对于Window下的常见压缩文件.zip和.rar,Linux也有相应的方法来解压它们:1:对于.ziplinux下提供了zip和unzip程序,zip是压缩程序,unzip是解压程序。它们的参数选项很多,这里只做简单介绍,举例说明一下其用法:#zipall.zip*.jpg(这条命令是将所有.jpg的文件压缩成一个z…

  • django models.py(python和django)

    本人java10年开发经验,现就职于电信,因工作需要学习python,记录自己的学习记录。后面也会持续分享真实工作经验,及项目。欢迎大家互关,一起学习!!文章有不严谨的地方请指出1.创建模型类打开pay应用的models.py创建模型类fromdatetimeimportdatetimefromdjango.dbimportmodels#Createyourmodelshere.#创建品牌的模型类classBrand(models.Model):#创建字段

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号