Vue的生命周期理解,简单易理解

ops/2024/9/25 21:22:57/

什么是Vue的生命周期

简单来说,Vue的生命周期就是vue实例从创建到销毁的一个过程,即从创建–>初始化数据–>编译模板–>挂载Dom -->渲染、更新 -->渲染–>销毁 的一系列过程。

Vue的生命周期有哪些阶段

Vue的生命周期,主要过程有:创建、挂载、更新、销毁 这四个过程,其对应的钩子函数执行顺序,分别是:
beforeCreate(创建前)、created(创建后)、beforeMount(挂载前)、mounted(挂载后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)。
这里放一张官网的截图,可以更清晰的看到它们的执行过程:

在这里插入图片描述
值得注意的是,beforeUpdate(更新前)、updated(更新后)是在每次vue页面更新时,都会执行的钩子函数,通常我们可以在这些钩子函数中写一些页面更新会触发的逻辑。

钩子函数详解

了解钩子函数每个阶段进行了什么操作,可以方便我们在更合适的位置加入我们的逻辑
1)beforeCreate
在实例初始化(new Vue())后执行的函数,此时的数据监听和事件绑定机制都未完成,是获取不到DOM节点的。一般我们可以在此阶段加loading事件,在加载实例时触发

(2)created
在这个阶段vue实例已经创建,以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始,仍然获取不到DOM元素。在此阶段,初始化完成时的事件写在这里,如在这结束loading事件,也可以进行异步请求

(3)beforeMount
在这个阶段完成了DOM的初始化,但仍然无法获取到具体的DOM元素,因为vue还没有进行根节点挂载,但是根节点已经创建完成,下面Vue对DOM的操作将围绕这个根节点进行。beforeMount这个阶段是过渡性的,在项目中使用得比较少

(4)mounted
在这个阶段,实例已经被挂载完成了,也就是能获取到数据和DOM元素了。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick.
(5)beforeUpdate
在数据发生改变,但页面还没有完成更新时执行的操作,在此阶段视图的数据和DOM元素的数据没有保持同步。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器

(6)updated
这个时候数据发生了改变,并且视图页面也已经完成了更新,因此,该阶段看到的DOM元素的内容是最新内容。

注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick

(7)beforeDestroy
此阶段Vue实例仍然完全可用,也就是还能访问到页面的响应式数据和事件。可以在这里注销eventBus等事件

(8)destroyed
DOM元素被销毁,此时对应 的Vue 实例所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。


http://www.ppmy.cn/ops/97343.html

相关文章

Linux---进程(6)---进程控制

目录 进程创建 写时拷贝 代码共享原理 写时拷贝的设计 写时拷贝原理 进程终止 信号编号 进程退出码 exit函数/_exit函数解析 进程等待 等待接口 status 父进程等待方式 阻塞等待 非阻塞等待 进程替换 进程替换接口 Shell运行规则 环境变量与进程替换 su-/su…

torch.randperm() 函数用法

文章目录 torch.randperm(n)举例 官方链接解释 torch.randperm(n) 返回 从0到n-1 的随机排列 整数 return a random permutation of integers from 0 to n-1. 举例 h_2 torch.randperm(5) h_2 # 输出 随机排列整数 tensor([1, 3, 4, 2, 0])

Nginx反向代理与负载均衡

Nginx 是一个高性能的 HTTP 服务器和反向代理服务器,广泛用于负载均衡、缓存和代理服务。以下是使用 Nginx 搭建网关和负载均衡的步骤,以及如何解决并发压力问题: 1. 安装 Nginx 首先,需要安装 Nginx。在大多数 Linux 发行版上&…

PythonStudio 控件使用常用方式(二十七)TActionList

PythonStudio是一个极强的开发Python的IDE工具,官网地址是:https://glsite.com/ ,在官网可以下载最新版的PythonStudio,同时,在使用PythonStudio时,它也能及时为用户升到最新版本。它使用的是Delphi的控件&…

Unity将摄像机视角保存成Json文件方便读取使用

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、设置环境👉二、代码如下👉三、使用方法 👉四、下次外部调用json里面的摄像机位置的时候如下代码方法👉壁纸分享👉总结 &#x1f449…

基于Python的办公自动化系统的设计与实现(论文+源码)_kaic

摘 要 对于现在快速发展的社会来说,传统的办公方式已经远远不能满足于人们的需求,为了适应现代化办公,需要设计一种新的高效的办公自动化系统。本系统采用Python语言,以Django为框架、以Mysql为数据库,来实现登录注册…

C++ 容器详解(已整理成表格)

目录 1. vector 2. deque 3. list 4. set 5. map 6. stack 7. queue 8. priority_queue C常见容器属性表 结语 本文将详细介绍常见的 C 容器,包括它们的定义、使用场景、功能、时间复杂度以及优缺点。最后,附上一个总结表格,方便快速查阅。 1…

SSRF服务器请求伪造

目录 SSRF服务器请求伪造 一、SSRF漏洞概述 二、SSRF常见的函数 1、file_get_contents() 2、fsockopen() 3、exec()发送GET请求 4、exec()发送POST请求 三、SSRF主要危害 1、先准备以下脚本 2、读取文件和信息 3、内网扫描 4、获取指纹信息 四、SSRF漏洞挖掘技巧 …