Vue 的生命周期之间到底做了什么事清?(源码详解)

Easter79
• 阅读 761

前言

相信大家对 Vue 有哪些生命周期早就已经烂熟于心,但是对于这些生命周期的前后分别做了哪些事情,可能还有些不熟悉。

本篇文章就从一个完整的流程开始,详细讲解各个生命周期之间发生了什么事情。

注意本文不涉及 keep-alive 的场景和错误处理的场景。

初始化流程

new Vue

new Vue(options) 开始作为入口,Vue 只是一个简单的构造函数,内部是这样的:

function Vue (options) {   this._init(options) }

进入了 _init 函数之后,先初始化了一些属性,然后开始第一个生命周期:

callHook(vm, 'beforeCreate')

beforeCreate被调用完成

beforeCreate 之后

  1. 初始化 inject

  2. 初始化 state

  • 初始化 props

  • 初始化 methods

  • 初始化 data

  • 初始化 computed

  • 初始化 initWatch

  1. 初始化 provide

所以在 data 中可以使用 props 上的值,反过来则不行。

然后进入 created 阶段:

callHook(vm, 'created')

created被调用完成

调用 $mount 方法,开始挂载组件到 dom 上。

如果使用了 runtime-with-compile 版本,则会把你传入的 template 选项,或者 html 文本,通过一系列的编译生成 render 函数。

  • 编译这个 template,生成 ast 抽象语法树。

  • 优化这个 ast,标记静态节点。(渲染过程中不会变的那些节点,优化性能)。

  • 根据 ast,生成 render 函数。

对应具体的代码就是:

const ast = parse(template.trim(), options) if (options.optimize !== false) {   optimize(ast, options) } const code = generate(ast, options)

如果是脚手架搭建的项目的话,这一步 vue-cli 已经帮你做好了,所以就直接进入 mountComponent 函数。

那么,确保有了 render 函数后,我们就可以往渲染的步骤继续进行了

beforeMount被调用完成

渲染组件的函数 定义好,具体代码是:

updateComponent = () => {   vm._update(vm._render(), hydrating) }

拆解来看,vm._render 其实就是调用我们上一步拿到的 render 函数生成一个 vnode,而 vm._update 方法则会对这个 vnode 进行 patch 操作,帮我们把 vnode 通过 createElm函数创建新节点并且渲染到 dom节点 中。

接下来就是执行这段代码了,是由 响应式原理 的一个核心类 Watcher 负责执行这个函数,为什么要它来代理执行呢?因为我们需要在这段过程中去 观察 这个函数读取了哪些响应式数据,将来这些响应式数据更新的时候,我们需要重新执行 updateComponent 函数。

如果是更新后调用 updateComponent 函数的话,updateComponent 内部的 patch 就不再是初始化时候的创建节点,而是对新旧 vnode 进行 diff,最小化的更新到 dom节点 上去。具体过程可以看我的上一篇文章:

为什么 Vue 中不要用 index 作为 key?(diff 算法详解)[1]

这一切交给 Watcher 完成:

new Watcher(vm, updateComponent, noop, {     before () {       if (vm._isMounted) {         callHook(vm, 'beforeUpdate')       }     }   }, true /* isRenderWatcher */)

注意这里在before 属性上定义了beforeUpdate 函数,也就是说在 Watcher 被响应式属性的更新触发之后,重新渲染新视图之前,会先调用 beforeUpdate 生命周期。

关于 Watcher 和响应式的概念,如果你还不清楚的话,可以阅读我之前的文章:

手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码[2]

注意,在 render 的过程中,如果遇到了 子组件,则会调用 createComponent 函数。

createComponent 函数内部,会做这样的一件事情:

Ctor = baseCtor.extend(Ctor)

在普通的场景下,其实这就是 Vue.extend 生成的构造函数,这个函数可以理解为继承自 Vue 函数。

这里插播一个知识点,除了组件有自己的生命周期外,其实 vnode 也是有自己的 生命周期的,只不过我们平常开发的时候是接触不到的。

那么子组件会有自己的 init 周期,这个周期内部会做这样的事情:

// 创建子组件 const child = createComponentInstanceForVnode(vnode) // 挂载到 dom 上 child.$mount(vnode.elm)

createComponentInstanceForVnode 内部又做了什么事呢?它会去调用 子组件 的构造函数。

new vnode.componentOptions.Ctor(options)

构造函数的内部是这样的:

const Sub = function VueComponent (options) {   this._init(options) }

这个 _init 其实就是我们文章开头的那个函数,也就是说,如果遇到 子组件,那么就会优先开始子组件的构建过程,也就是说,从 beforeCreated 重新开始。这是一个递归的构建过程。

也就是说,如果我们有 父 -> 子 -> 孙 这三个组件,那么它们的初始化生命周期顺序是这样的:

父 beforeCreate 父 create 父 beforeMount 子 beforeCreate 子 create 子 beforeMount 孙 beforeCreate 孙 create  孙 beforeMount 孙 mounted 子 mounted 父 mounted

然后,mounted 生命周期被触发。

mounted被调用完成

到此为止,组件的挂载就完成了,初始化的生命周期结束。

更新流程

当一个响应式属性被更新后,触发了 Watcher 的回调函数,也就是 vm._update(vm._render()),在更新之前,会先调用刚才在 before 属性上定义的函数,也就是

callHook(vm, 'beforeUpdate')

注意,由于 Vue 的异步更新机制,beforeUpdate 的调用已经是在 nextTick 中了。具体代码如下:

`nextTick(flushSchedulerQueue)

function flushSchedulerQueue {
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
     // callHook(vm, 'beforeUpdate')
      watcher.before()
    }
 }
}
`

beforeUpdate被调用完成

然后经历了一系列的 patchdiff 流程后,组件重新渲染完毕,调用 updated 钩子。

注意,这里是对 watcher 倒序 updated 调用的。

也就是说,假如同一个属性通过 props 分别流向 父 -> 子 -> 孙 这个路径,那么收集到依赖的先后也是这个顺序,但是触发 updated 钩子确是 孙 -> 子 -> 父 这个顺序去触发的。

function callUpdatedHooks (queue) {   let i = queue.length   while (i--) {     const watcher = queue[i]     const vm = watcher.vm     if (vm._watcher === watcher && vm._isMounted) {       callHook(vm, 'updated')     }   } }

updated被调用完成

至此,渲染更新流程完毕。

销毁流程

在刚刚所说的更新后的 patch 过程中,如果发现有组件在下一轮渲染中消失了,比如 v-for 对应的数组中少了一个数据。那么就会调用 removeVnodes 进入组件的销毁流程。

removeVnodes 会调用 vnodedestroy 生命周期,而 destroy 内部则会调用我们相对比较熟悉的 vm.$destroy()。(keep-alive 包裹的子组件除外)

这时,就会调用 callHook(vm, 'beforeDestroy')

beforeDestroy被调用完成

之后就会经历一系列的清理逻辑,清除父子关系、watcher 关闭等逻辑。但是注意,$destroy 并不会把组件从视图上移除,如果想要手动销毁一个组件,则需要我们自己去完成这个逻辑。

然后,调用最后的 callHook(vm, 'destroyed')

destroyed被调用完成

总结

至此为止,Vue 的生命周期我们就完整的回顾了一遍。知道各个生命周期之间发生了什么事,可以让我们在编写 Vue 组件的过程中更加胸有成竹。

希望这篇文章对你有帮助。

❤️感谢大家

1.如果本文对你有帮助,就点个在看支持下吧,你的「在看」是我创作的动力。

参考资料

[1]

为什么 Vue 中不要用 index 作为 key?(diff 算法详解): https://juejin.im/post/5e8694b75188257372503722

[2]

手把手带你实现一个最精简的响应式系统来学习Vue的data、computed、watch源码: https://juejin.im/post/5db6433b51882564912fc30f

本文分享自微信公众号 - 前端从进阶到入院(code_with_love)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k