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

My_Oh_My 发布于2019-08-23 15:07 / 2080人阅读

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

由于工作中经常使用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这个钩子函数中。

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

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

云服务器 GPU云服务器生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101530.html

「Vue实践」武装你的前端项目

摘要：所有的高阶抽象组件是通过定义选项来声明的。所以一般在生命周期或者中，需要用实例的方法清除可当你有多个时，就需要重复性劳动销毁这件事儿。更多的配置请看双端开启开启压缩的好处是什么可以减小文件体积，传输速度更快。本文目录接口模块处理 Vue组件动态注册页面性能调试：Hiper Vue高阶组件封装性能优化：eventBus封装 webpack插件：真香本文项目基于Vue-Cli3，想知...

曹金海 2019-05-23 17:30 评论0 收藏0
根据调试工具看Vue源码之组件通信（一）

摘要：根据调试工具看源码之组件通信一根据调试工具看源码之组件通信一在平时的业务开发中，相信在座的各位没少用过组件通信。看完本文可以帮助你了解组件的通信方式及原理，从而进一步加深对的理解，远离工程师的行列。根据调试工具看Vue源码之组件通信（一）## 根据调试工具看Vue源码之组件通信（一）在平时的业务开发中，相信在座的各位没少用过组件通信。然而，对于一些新手/业务熟手来说，不懂技术原理往...

付伦 2019-08-23 15:30 评论0 收藏0
package.json文件各字段的说明

摘要：字段由脚本命令组成的字典，这些命令运行在包的各个生命周期中。在打包过程中，如果遇到字段会优先使用字段表示的路径下的文件，如果不存在，则用字段表示的作为入口，并按照的规范打包。其中还分析了文件中字段和字段的不同以及和两个字段的区别。所有用npm下载的包或者要上传至npm的模块都会有一个package.json文件，这个文件总是存在于模块(或者包)的根目录下，这个文件到底是干嘛的，现在就...

yzd 2019-08-23 13:50 评论0 收藏0
根据调试工具看Vue源码之computed（一）

摘要：官方定义类型详细计算属性将被混入到实例中。所有和的上下文自动地绑定为实例计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖比如非响应式属性在该实例范畴之外，则计算属性是不会被更新的。官方定义类型：{ [key: string]: Function | { get: Function, set: Function } } 详细：计算属性将被混入到 V...

aisuhua 2019-08-26 13:34 评论0 收藏0