当前位置: 首页 > 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…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

淘宝扭蛋机小程序系统开发:打造互动性强的购物平台

淘宝扭蛋机小程序系统的开发&#xff0c;旨在打造一个互动性强的购物平台&#xff0c;让用户在购物的同时&#xff0c;能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机&#xff0c;实现旋转、抽拉等动作&#xff0c;增…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

Unity VR/MR开发-VR开发与传统3D开发的差异

视频讲解链接&#xff1a;【XR马斯维】VR/MR开发与传统3D开发的差异【UnityVR/MR开发教程--入门】_哔哩哔哩_bilibili...