当前位置: 首页 > news >正文

vue中的生命周期

前言

很多时候我们希望能在 vue 生命周期的过程中执行一些操作,生命周期钩子函数也因此诞生了。相信使用过 vue 框架的同学都知道,生命周期的钩子函数允许我们在实例的不同阶段执行各种操作,便于我们更好的控制和使用实例。

在这里插入图片描述


生命周期钩子函数

通俗来讲,其实 vue 的生命周期就是实例从创建到销毁的过程。开始创建、初始化数据、编译模板、挂载 dom、渲染、更新、销毁等一系列过程,称之为 vue 的生命周期。而钩子函数可以说是 vue 生命周期中每个阶段对外开放让开发者操作 vue 的一些方法实例。


1. beforeCreate 组件实例创建前

beforeCreate 钩子函数中,vue 实列还没有挂载完成,此时的 this 是获取不到的,$el 还不可用,data 中的数据也是获取不到的,页面中的真实 dom 节点也没有挂载出来。

<template><div></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},beforeCreate() {console.log(this.msg); // undefinedconsole.log(this.$el); // undefined},
};
</script>

2. created 组件实例创建后

created 钩子函数中,vue 实例中的 datamethod 已被初始化,属性也被绑定,但是此时还是虚拟 dom,真实 dom 还没生成,$el 还不可用。但是可以调用 datamethod 的数据及方法,created 钩子函数也是最早可以调用 datamethod 的。

<template><div></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},created() {console.log(this.msg); // data数据console.log(this.$el); // undefined},
};
</script>

3. beforeMount 渲染dom前

beforeMount 钩子函数中,模板已经编译完成,但还没有被渲染至页面中,可以获取 thisdata 中的数据,即将可以获取到真实的 dom

<template><div></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},beforeMount() {console.log(this.msg); // data数据console.log(this.$el); // undefined},
};
</script>

4. mounted 渲染dom后

mounted 钩子函数中,模板已经被渲染成真实 dom,用户已经可以看到渲染完成的页面,页面的数据也是通过双向绑定显示 data 中的数据,数据挂载完毕。

<template><div class="box"></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},mounted() {console.log(this.msg); // data数据console.log(this.$el); // <div data-v-7ba5bd90 class="box"></div>},
};
</script>

小结1

至此,创建 vue 实例完成。

<template><div class="box"></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},// 组件实例创建前beforeCreate() {console.log(this.msg); // undefinedconsole.log(this.$el); // undefined},// 组件实例创建后created() {console.log(this.msg); // data数据console.log(this.$el); // undefined},// 挂载dom前beforeMount() {console.log(this.msg); // data数据console.log(this.$el); // undefined},// 挂载dom后mounted() {console.log(this.msg); // data数据console.log(this.$el); // <div data-v-7ba5bd90 class="box"></div>},
};
</script>

控制台打印结果

在这里插入图片描述


5. beforeUpdate 数据更新前

beforeUpdate 钩子函数中,是更新前的状态,但是是 view 层的数据变化前,不是 data 中的数据改变前,重新渲染之前触发,然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染。beforeUpdate 并不会主动调用,在 dom 挂载完成后,只有在数据更新时,监听到数据的变化才会执行,但在次钩子函数中,获取到的数据是数据更行之前的数据。

<template><div class="box">{{num}}</div>
</template>
<script>
export default {data() {return {msg: "data数据",num: 0,};},mounted() {this.num++;},beforeUpdate() {console.log(this.$el); // <div data-v-7ba5bd90 class="box">1</div>console.log(this.$data); // {msg: "data数据",num:0}},
};
</script>

6. updated 数据更新后

updata 钩子函数中,数据已经更改完成,且生成新的虚拟 dom,与上一次的虚拟 dom 结构进行对比,比较出来差异(diff算法),再去进行真实 dom 的重新渲染操作。updated 中真实 dom 里面显示的数据跟内存中 data 里面的数据趋于一致。

<template><div class="box"><button @click="dotOn">点击我</button><div>{{msg}}</div></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},methods: {dotOn() {this.msg = "更新数据!!!";},},updated() {console.log(this.$el);console.log(this.msg);},
};
</script>

控制台打印结果

在这里插入图片描述


7. beforeDestroy 组件实例销毁前

beforeDestroy 钩子函数中,是组件销毁前执行,会触发执行 vm.$destroy() 方法,然后组件被销毁。

<template><div class="box"><router-link to="./b"><button>点击离开该页面</button></router-link><div>{{msg}}</div></div>
</template>
<script>
export default {data() {return {msg: "data数据",};},beforeDestroy() {this.msg = "离开之前更新数据!!!";console.log(this.msg);},
};
</script>

控制台打印结果

在这里插入图片描述


8. destroyed 组件实例销毁后

destroyed 钩子函数中,组件销毁完成。dom 仍然元素存在,只是不再受 vue 控制,卸载 watcher,事件监听,子组件。

<template><div class="box"><router-link to="./b"><button>点击离开该页面</button></router-link></div>
</template>
<script>
export default {data() {return {};},mounted() {let loginForm = {userNmae: "sds",password: "123",};sessionStorage.setItem("userKey", JSON.stringify(loginForm));},destroyed() {window.sessionStorage.removeItem("userKey");},
};
</script>

控制台打印结果

在这里插入图片描述


小结2

以上就是 vue 中最常见的生命周期了,当然,除此之外,vue 还有下面 3 个特殊的生命周期。


9. activated 活跃状态

activated 钩子函数中,组件激活时调用。需要配合 keep-alive 来进行使用。


10. deactivated 缓存状态

deactivated 钩子函数中,组件停用的时候调用。需要配合 keep-alive 来进行使用。


11. errorCaptured 捕捉子/孙组件错误时调用

errorCaptured 钩子函数中,当捕获一个来自子/孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。


各个钩子函数的使用场景

beforeCreate

beforeCreate 可以完成一些初始化的工作。例如可以在此加一些 loading 效果,在 created 时进行移除。

created

created 一般在这里就可以发送一些网络请求获取数据了。

beforeMounted

beforeMounted 可以访问数据,也可以更改数据。

mounted

mounted 挂载元素,获取 dom 节点等;

beforeUpdate

beforeUpdate 适合在更新之前访问现有的 dom,例如手动移除已添加的事件监听器。

updated

updated 任何数据的更新,如果对数据统一处理,在这里写上相应的函数。

beforeDestroy

beforeDestroy 可以在此清除计时器、清除非指令绑定的事件等。

destroyed

destroyed 组件销毁加一些轻提示之类的。

相关文章:

vue中的生命周期

前言 很多时候我们希望能在 vue 生命周期的过程中执行一些操作&#xff0c;生命周期钩子函数也因此诞生了。相信使用过 vue 框架的同学都知道&#xff0c;生命周期的钩子函数允许我们在实例的不同阶段执行各种操作&#xff0c;便于我们更好的控制和使用实例。 生命周期钩子函数…...

硬件原理图设计规范(二)

1、可编程逻辑器件 编号 级别 条目内容 备注 1 推荐 FPGA的LE资源利用率要保证在50%&#xff5e;80%之间&#xff0c;EPLD的MC资源的利用率要保证在50%&#xff5e;90%之间。对于FPGA中的锁相环、RAM、乘法器、DSP单元、CPU核等资源&#xff0c;经过精确预算&#xff0c;…...

复旦微ZYNQ7020全国产替代方案设计

现在国产化进度赶人&#xff0c;进口的芯片只做了个功能验证&#xff0c;马上就要换上国产的。国内现在已经做出来zynq的只有复旦微一家&#xff0c;已经在研制的有上海安路&#xff0c;还有成都华微&#xff08;不排除深圳国威也在做&#xff0c;毕竟这个市场潜力很大&#xf…...

蓝桥杯真题——自动售水机

2012年第四届全国电子专业人才设计与技能大赛“自动售水机”设计任务书1. 系统框图接下来我们将任务分块&#xff1a; 1. 按键控制单元 设定按键 S7 为出水控制按键&#xff0c;当 S7 按下后&#xff0c;售水机持续出水&#xff08;继电器接通&#xff0c;指示 灯 L10 点亮&…...

软件质量保证与测试 课程设计 测试报告 缺陷报告撰写方法

测 试 报 告 2020年 6月 1日 测试项目 程序员 测试人 测试阶段&#xff1a; □集成 √系统 □ 测试日志编号清单 1,2,3,4,5,6,7,8,9,10 遗留错误说明&#xff1a;&#xff08;测试后仍然遗留下来未解决的错误及其说明&#xff09; 1.系统界面不够友好&…...

vue2和vue3中路由的区别和写法?

前言&#xff1a;Vue 2 和 Vue 3 中路由的主要区别在于使用的路由库不同。在 Vue 2 中&#xff0c;通常使用 Vue Router 作为路由库&#xff1b;而在 Vue 3 中&#xff0c;Vue Router 仍然是官方推荐的路由库&#xff0c;但也可以选择使用新的路由库 - Vue Router Next。下面分…...

【数据结构】第四站:单链表力扣题(一)

目录 一、移除链表元素 二、链表的中间结点 三、链表中倒数第k个结点 四、反转链表 五、合并两个有序链表 六、分割链表 一、移除链表元素 题目描述&#xff1a;力扣 法一&#xff1a;直接循环依次判断 对于这个题目&#xff0c;我们最容易想到的一种思路就是&#xff0c…...

SAP BPC简介

BPC是SAP在financial application领域主推的产品&#xff0c;由于从原有产品线发展而来&#xff0c;产品本身有两个版本&#xff0c;分别是基于MS OLAP平台和Netweaver OLAP平台。 整个系统分为.net前台和abap后台。由于abap端的数据结构与.net数据结构的差异&#xff0c;所以没…...

Linux网络概述

写咋前面 今天,我们需要初步的认识一下Linux中网络的基本原理,只有大家对这个有一个初步的认识,后面我们学习起来才会更加的简单容易.计算机语言知识那么多,但是Linux不是.面试时,面试官总是会有问题难住你,我们后面需要看看书,这一点非常重要.我们现在谈的是脉络,.是框架.这些…...

Mybatis --- 获取参数值和查询功能

一、MyBatis的增删改查 1.1、新增 <!--int insertUser();--> <insert id"insertUser">insert into t_user values(null,admin,123456,23,男) </insert> 1.2、删除 <!--int deleteUser();--> <delete id"deleteUser">dele…...

【C++】C++入门,你必须要知道的知识

1.C关键字 &#x1f525;前言&#xff1a; C是在C的基础之上&#xff0c;容纳进去了面向对象编程思想&#xff0c;并增加了许多有用的库&#xff0c;以及编程范式等。熟悉C语言之后&#xff0c;对C学习有一定的帮助。今天的主要目标&#xff1a; 1️⃣ 补充C语言语法的不足&…...

spring(七):事务操作

spring&#xff08;七&#xff09;&#xff1a;事务操作前言一、什么是事务二、事务四个特性&#xff08;ACID&#xff09;三、事务操作&#xff08;搭建事务操作环境&#xff09;四、事务操作&#xff08;Spring 事务管理介绍&#xff09;五、事务操作&#xff08;注解声明式事…...

Word怎么转换成PDF文件格式?思路提供

PDF是一种通用的文件格式&#xff0c;它可以在不同操作系统和设备上保持一致的显示效果。在日常工作或学习中&#xff0c;我们常常需要将Word文档转换为PDF格式&#xff0c;以便更好地进行分享、存档或打印&#xff0c;毕竟Word文档则往往会因为不同版本的软件或者字体等原因而…...

HCIE-Cloud Computing LAB备考第二步:逐题攻破--第五题:规划--根据网络平面规划表,完成ensp中接入交换机SW1/2的配置

我是第五题规划题目的要求之一,需要从这里跳转过来,没看过题目的彭友,可以先跳转过去哈 解题:根据网络平面规划表,在两台交换机上对应的端口表填写服务器的网口号,完成ensp中接入交换机SW1/2的配置 答案 完成交换机端口表 第一:心中划分好“服务器接口表”,考试不需…...

【无标题】Perforce研讨会回顾 | Helix Core在芯片行业的应用实例:芯片项目的版本控制、持续集成及自动化

2023年2月28日&#xff0c;龙智联合全球领先的数字资产管理和DevSecOps工具厂商Perforce共同举办Perforce on Tour网络研讨会——“赋能‘大’研发&#xff0c;助力‘快’交付”。 研讨会上&#xff0c;在芯片行业有15年经验的Perforce Helix Core深度用户——何刚了带来精彩演…...

AdamW 优化器

Adam 优化器于 2014 年推出&#xff0c;其思想&#xff1a;既然知道某些参数移动得更快、更远&#xff0c;则每个参数不需要遵循相同的学习率&#xff0c;因为最近梯度的平方代表每一个权重可以得到多少信号&#xff0c;可以除以这个&#xff0c;确保即使是最迟钝的权重也有机会…...

手把手教你基于HTML、CSS搭建我的相册(上)

The sand accumulates to form a pagoda写在前面HTML是什么&#xff1f;CSS是什么&#xff1f;demo搭建写在最后写在前面 其实有过一些粉丝咨询前端该从什么开始学&#xff0c;那当然是我们的前端基础三件套开始学起&#xff0c;HTML、CSS、javaScript&#xff0c;前端的大部分…...

基于Redis实现的延时队列

基于Redis实现的延时队列 针对于Redis实现延时队列有两种实现方式&#xff1a; 使用zset实现实现的延时队列 借助redis zset来实现延时队列&#xff0c;具体的实现代码很简单&#xff0c;就是从zset中取出score小于当前时间戳的数据 import cn.hutool.json.JSONUtil; impor…...

(3.16——3.19)本周后半段总结

周四&#xff08;3.16&#xff09; 1.封装了TitleTip组件&#xff0c;并写了博客记录 http://t.csdn.cn/DAY4chttp://t.csdn.cn/DAY4c2.菜单跳转配置完毕&#xff0c;进行了一些页面的细节样式修改 3.基本写完了ServerSideEncryption页面&#xff0c;十一点多剩最后一点交互的…...

C++ 基础: cin和getline() 有啥区别?

所谓温故而知新&#xff0c;所以时不时会回头来看看我们最最基础的知识。 获取标准键盘输入的方法有多种。以C语言来说&#xff0c;最常用的就是cin 和geline() 。那么它们之间有什么区别呢&#xff0c;我们总结一下。 一、cin和geline的异同点 在 C 中&#xff0c;cin 和 ge…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...