如果你和我一样,以前对vue生命周期的理解仅限于生命周期钩子,那么本文可以让我们更深入一层,理解vue在生命周期各个阶段所做的事,对我们对vue的理解和使用很有好处。

(1)通过new Vue()创建新的vue实例

不管页面还是组件,都是一个个vue实例。一个vue应用,其实就是一个个vue实例的嵌套。

(2)初始化生命周期和事件监听

vue实例在生命周期中,会用一些内部变量来标志生命周期的当前阶段,比如_isMounted、_isDestroyed等,这些标志对于vue的内部运行很重要,决定了在什么时候做什么事。

vue会绑定事件监听函数,包括组件自身的事件监听,和父组件向子组件传递的事件监听。

(3)beforeCreate钩子

此时还无法访问props、data、computed、watch、methods。

(4)初始化状态

初始化props、data、computed、watch、methods,vue会在此时循环遍历props、data、computed的每一个属性,用Object.defineProperty()把属性转换为getter、setter,这是vue2实现响应式的基础。

(5)created钩子

此时props、data、computed、watch、methods已经初始化完成,可以通过this来调用了。如果想在进入页面后马上做一些操作,此时是最好的选择,我们一般都在此时调用api拉取数据。

(6)开始挂载

如果el属性存在,则执行$mount()开始挂载。否则,等到vm.$mount()被调用时,再开始挂载。

(7)beforeMount钩子

this.$el开始可以访问,不过此时获取到的是vue实例挂载前的DOM对象。

(8)模板编译

检查el、templete、render三个属性,如果render存在,则直接作为render函数进入下一步,否则如果templete存在,则把它编译成render函数,否则如果el存在,则以el的outerHTML作为模板编译成render函数。总之,这一步的目的就是得到一个render函数,也就是渲染函数。每一个vue组件都有自己的render函数。

(9)生成虚拟DOM

执行render函数,得到虚拟DOM。

(10)渲染

用vue实例的数据填充虚拟DOM,把虚拟DOM(是一个对象)渲染为真实的DOM(就是网页中的DOM元素)。

(11)挂载

把真实的DOM挂载到页面中。

如果有el属性,则替换掉el的outerHTML。如果没有,则会等到$mount()被调用时再挂载(参数可以是css选择器或者DOM对象),同样替换掉目标元素的outerHTML,不管它里面有什么内容。如果没有调用$mount(),则DOM对象会保持在内存中,你可以通过this.$el获取到它,然后手动插入到页面中。

(12)mounted钩子

此时DOM已经正式挂载到页面中,可以通过this.$el访问到最终的DOM对象。需要访问DOM的操作可以在此时进行,常见于一些第三方库。

(13)beforeUpdate钩子

当模板的依赖数据发生变化时,beforeUpdate钩子会被触发,模板开始重更新渲染。

(14)diffing

生成新的虚拟DOM,和旧的虚拟DOM进行差异化比较,这个过程叫“diffing”。

(15)patching

基于上一步的结果,尽可能少的对真实DOM做出修改,这个过程叫“patching”。

(16)updated钩子

在DOM更新完成后,updated钩子被触发,此时,你可以访问到更新后的DOM。

我们更常用的是在代码中,修改data数据后想要马上访问到更新后的DOM,此时可以把代码写在this.$nextTick()的参数函数里。

(17)beforeDestroy钩子

vue实例即将被销毁,但此时实例仍然完全可用。

我们一般在此时做一些清理工作,比如:移除全局的事件监听(比如window的resize事件)、清理setTimeout和setInterval、释放一些资源(比如websocket连接)、保存组件的状态(比如滚动的位置、复杂的表单输入)。

(18)destroyed钩子

vue实例已经被销毁,所有的事件监听已经被移除,所有的子实例也已经被销毁。

如果该实例有子组件,子组件的从beforeCreate到mounted将会插入到该实例的beforeMount和mounted之间进行,子组件的beforeDestroy和destroyed则会插入到该实例的beforeDestroy和destroyed之间进行。至于beforeUpdate和updated,vue组件的更新基于依赖追踪,父组件和子组件的更新没有必然的联系。可以看一下我的上一篇文章:vue的响应式原理:依赖追踪》

有子组件的实例生命周期如下:

(1)beforeCreate

(2)created

(3)beforeMount

(4)子组件beforeCreate

(5)子组件created

(6)子组件beforeMount

(7)子组件mounted

(8)mounted

(9)beforeDestroy

(10)子组件beforeDestroy

(11)子组件destroyed

(12)destroyed

这样的设计,保证了父组件挂载完成时,子组件已全部挂载,父组件销毁时,子组件已全部销毁,确保了它们之间逻辑上的所属关系。

本人水平非常有限,写作主要是为了把自己学过的东西捋清楚。如有错误,还请指正,感激不尽。

详细一些的vue生命周期的更多相关文章

  1. Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。(图解详细过程)(2022/7/17)

    文章目录 1.Vue生命周期 1.1 概念 1.2 图解 2.钩子函数的用法说明 2.1 beforeCreate()和created()的详细讲述 2.1.1 方法说明 2.1.2 代码实例 2.1 ...

  2. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

  3. vue 生命周期钩子

    每个vue实例被创建时都会经历一系列初始化的过程,像是一个生命从无到有的过程,所以叫生命周期,而这个过程都有对应的不同阶段,也就对应了生命周期不同的钩子函数,这些生命周期函数,作为vue实例的属性使用 ...

  4. vue 生命周期的详解

    一.vue生命周期的解析 > 1>什么是vue生命周期 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.详细来说,就是Vue实例从开始创建,初始化数据, ...

  5. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  6. Vue生命周期,我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  7. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. vue 生命周期

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...

  9. 详解vue生命周期

    vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...

  10. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

随机推荐

  1. 耗时6个月,我做了一款干净、免费、开源的AI数据库

    一.Chat2DB简介 在消失的这段时间,我和小伙伴们做了一款集成了AI的数据库管理工具Chat2DB. 他是数据库也集成了AIGC的能力,能够将自然语言转换为SQL,也可以将SQL转换为自然语言,还 ...

  2. 一文详解自然语言处理两大任务与代码实战:NLU与NLG

    自然语言处理(NLP)涵盖了从基础理论到实际应用的广泛领域,本文深入探讨了NLP的关键概念,包括词向量.文本预处理.自然语言理解与生成.统计与规则驱动方法等,为读者提供了全面而深入的视角. 作者 Te ...

  3. mybatis系列: 简介以及使用

    目录 一.简介 二.简单使用 一.简介 MyBatis本质上就是对JDBC的封装,通过MyBatis完成CRUD. MyBatis在三层架构中负责持久层的,属于持久层框架. MyBatis的发展历程: ...

  4. Mybatis plus配置MetaObjectHandler无效

    项目环境 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-b ...

  5. Codeforces Round div.2 C

    Smiling & Weeping ----我对姑娘的喜欢,何止钟意二字 题目链接:Problem - C - Codeforces 自我分析:我感觉这是一道很有意义的题目,可以帮我们更好的理 ...

  6. Solution -「洛谷 P4688」「YunoOI 2016」掉进兔子洞

    Description (Link)[https://www.luogu.com.cn/problem/P4688]. 每次询问三个区间,把三个区间中同时出现的数一个一个删掉,问最后三个区间剩下的数的 ...

  7. Docker Compose V2 安装常用数据库MySQL+Mongo

    前言 书接上篇:Docker V24 及 Docker Compose V2 的安装及使用 本篇操作都在 centos8 虚拟机 devops01 中进行,并都归属网络:devopsnetwork 主 ...

  8. Factors 分解质因数

    package com.yourself.yours; import java.util.Scanner; /** ****************************************** ...

  9. tmai

    天猫精灵技能应用平台合作协议 发布日期:2020年03月18日 更新日期:2021年02月01日 鉴于您(语音技能.小程序或应用程序APP等的制作.提供或开发者)希望入驻或与天猫精灵技能应用平台(又称 ...

  10. 我在前端写Java SpringBoot项目

    前言 玩归玩,闹归闹,别拿 C端 开玩笑! 这里不推荐大家把Node服务作为C端服务,毕竟它是单线程多任务 机制. 这一特性是 Javascript 语言设计之初,就决定了它的使命 - Java &g ...