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

[Vue] Vue2和Vue3的生命周期函数

vue2有11个生命周期钩子, vue3有8个生命周期钩子

从vue创建、运行、到销毁总是伴随着各种事件, 创建、挂载、更新到销毁。

1.vue2系列生命周期

⑴【beforecreate】实例创建前。

vue完全创建之前,会自动执行这个函数。

⑵【Created】实例创建后。

这也是个生命周期函数,beforecreate执行完后会自动执行它。其中data的值是由在created中请求并初始化的。

⑶【beforemount】组件挂载前。

模板即将挂载到页面的一瞬间会执行beforemount

⑷【Mounted】组件挂载后

挂载完成,也就是模板中的html渲染到了html页面中,此时一般可以做一些ajax操作。

mounted只会执行一次。

⑸【beforeupdate】视图更新前

数据发生改变,还没有渲染之前beforeupdate会执行

⑹【updated】视图更新后

当数据更新完重新渲染时,updated这个函数会执行。

⑺【beforedestroy】失礼销毁前

钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

⑻【Destroy】实例销毁后

做收尾工作,在结束之后做一些事情,比如定时器和全局更新要在这里销毁。

⑼①【activeted】被keep-alive缓存的组件激活时调用

⑽②【deactiveted】 没有被激活时调用

⑾③【errorCaotured】捕捉子组件的错误时调用⑴

在这里插入图片描述

2.Vue3系列生命周期

1、beforeCreate -> 使用 setup()

2、created -> 使用 setup()

3、beforeMount -> onBeforeMount

4、mounted -> onMounted

5、beforeUpdate -> onBeforeUpdate

6、updated -> onUpdated

7、beforeDestroy -> onBeforeUnmount

8、destroyed -> onUnmounted

9、errorCaptured -> onErrorCaptured

⑴【beforecreate】------->【setup】 开始创建组件前,创建的是data和method

Create------- >【setup】

setup 这个函数是在beforeCreate和created之前运行的,所以你可以用它来代替这两个钩子函数。

⑵【beforemount】------- >【onBeforeMount】组件挂载前

在挂载开始之前被调用,相关的render函数首次被调用。

⑶【Mounted】------- >【onMount】组件挂载后

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。

⑷【beforeupdate】------- >【onBeforeUpdate】视图更新前

数据发生改变,还没有渲染之前beforeupdate会执行

数据发生改变时调用,你可以在这个钩子中进一步地更改状态,还不会触发附加的重渲染效果。

⑸【updated】------- >【onUpdate】视图更新后

由于数据更改导致的虚拟dom重新渲染和打补丁,在这之后后调用该钩子

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用

⑹【beforedestroy】------- >【onBeforeUnmount】卸载组件实例之前

视图销毁前调用,在这一步,实例仍然完全可用

⑺【Destroyed】------- >【onUnmount】卸载组件实例之后

相关文章:

[Vue] Vue2和Vue3的生命周期函数

vue2有11个生命周期钩子, vue3有8个生命周期钩子 从vue创建、运行、到销毁总是伴随着各种事件, 创建、挂载、更新到销毁。 1.vue2系列生命周期 ⑴【beforecreate】实例创建前。 vue完全创建之前,会自动执行这个函数。 ⑵【Created】实例创建后。 这也是个生命…...

springboot集成分布式任务调度系统xxl-job(调度器和执行器)

一、部署xxl-job服务端 下载xxl-job源码 下载地址: https://gitee.com/xuxueli0323/xxl-job 二、导入项目、创建xxl_job数据库、修改配置文件为自己的数据库 三、启动项目、访问首页 访问地址: http://localhost:8080/xxl-job-admin/ 账号&#xff1…...

11_Vue3中的新的组件

1. Fragment 在Vue2中:组件必须要有一个跟标签在Vue3中:组件可以没有根标签,内部会将多个标签包含在一个Fragment虚拟元素中好处:减少标签层级,减少内存占用 2. Teleport 什么是Teleport?——Teleport 是一种能够将…...

详解推送Git分支时发生的 cannot lock ref 错误

在码云上建了一个项目仓库,分支模型使用 git-flow ,并在本地新建了一个功能分支 feature/feature-poll。后来在推送时发生错误,提示 cannot lock ref ...... 这样的错误信息。下面复盘一下具体过程和解决办法,以供参考。 在码云中建立仓库时,考虑到想按照 GitFlow 的模式…...

[国产MCU]-BL602开发实例-PWM

PWM 文章目录 PWM1、BL602的PWM介绍2、PWM驱动API介绍3、PWM使用示例脉冲宽度调制(Pulse width modulation,简称PWM)是一种模拟控制方式,根据相应载荷的变化来调制晶体管基极或MOS管栅极的偏置,来实现晶体管或MOS管导通时间的改变,从而实现开关稳定电源输出的改变。这种方…...

【JMeter】 使用Synchronizing Timer设置请求集合点,实现绝对并发

目录 布局设置说明 Number of Simulated Users to Group Timeout in milliseconds 使用时需要注意的点 集合点作用域 实际运行 资料获取方法 布局设置说明 参数说明: Number of Simulated Users to Group 每次释放的线程数量。如果设置为0,等同…...

无法对watchdog.sys等系统文件删除,弯道修复,这里解决办法很简单

右击360强力删除...

ClickHouse(九):Clickhouse表引擎 - Log系列表引擎

进入正文前,感谢宝子们订阅专题、点赞、评论、收藏!关注IT贫道,获取高质量博客内容! 🏡个人主页:含各种IT体系技术,IT贫道_Apache Doris,Kerberos安全认证,大数据OLAP体系技术栈-CSDN博客 &…...

3.1 计算机网络和网络设备

数据参考:CISP官方 目录 计算机网络基础网络互联设备网络传输介质 一、计算机网络基础 1、ENIAC:世界上第一台计算机的诞生 1946年2月14日,宾夕法尼亚大学诞生了世界上第一台计算机,名为电子数字积分计算机(ENIAC…...

值得中国人民大学与加拿大女王大学金融硕士中的金融人观看的五部电影

积金累玉的机会每个人都会把握,那么学习可以实现,生活娱乐一样可以。当电影遇见金融会产生怎样的化学变化呢?今天我们就带着这样的疑问来一起走进英国时报发布的经典电影,也是最值得中国人民大学与加拿大女王大学金融硕士中的金融…...

【数据库】Redis可以替代Mysql吗

Redis和Mysql的搭配 Redis可以替代Mysql吗什么是RedisRedis适用的场景以及优点Redis的缺点 什么是MysqlMysql的优点Mysql缺点 总结 Redis可以替代Mysql吗 Redis不能代替MySQL, Redis和MySQL只能是一种互补。 什么是Redis Redis是一种非关系型数据库,也…...

5 指针与多维数组:多维数组在内存中的存储与指针的关系

推荐最近在工作学习用的一款好用的智能助手AIRight 网址是www.airight.fun。 指针与多维数组:多维数组在内存中的存储与指针的关系 引言 多维数组是数据结构中常见且重要的概念,它是由多个一维数组组成的数据集合。在计算机内存中,多维数组…...

Spring 创建 Bean 的三种方式

在使用 Spring 框架后,对象以 Bean 的形式统一交给 IOC 容器去创建和管理。现阶段主流的方式是基于 SpringBoot 框架,基于注解的方式实现 Bean 的创建,但在原生 Spring 框架中其实存在三种创建 Bean 的方式。 一、基础类 BeanProcess 实体类…...

软工导论知识框架(五)面向对象方法学

传统软件工程方法学适用于中小型软件产品开发; 面向对象软件工程方法学适用于大型软件产品开发。 一.四要素 对象+类+继承+传递消息实现通信 二.概念 1.对象:具有相同状态的一组操作的集合,对状态和操作…...

MyBatisPlus代码生成器

首先需要mybaits-plus依赖和自动代码生成器依赖 <!-- mybatis-plus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.0.5</version></dependency><!-…...

文件传输软件常见问题解决办法大全

文件传输软件是我们工作中不可缺少的一种工具&#xff0c;它可以帮助我们快速、安全、稳定地传输各种文件&#xff0c;如文档、图片、视频等。但是在使用文件传输软件的过程中&#xff0c;我们也可能会遇到一些问题&#xff0c;影响我们的工作效率和传输质量。那么&#xff0c;…...

springboot工程测试临时数据修改技巧

目录 properties临时属性测试注入 args临时参数测试注入 bean配置类属性注入&#xff08;Import&#xff09; SpringBootTest是一个注解&#xff0c;用于测试Spring Boot应用程序。它可用于指示Spring Boot测试应用程序的启动点&#xff0c;并为测试提供一个可用的Spring应用…...

Echarts 清空画布空白以及鼠标悬浮提示信息格式化问题

清空画布用clear()会导致图表空白 const option1 = this.myEchart1.getOption()const option2 = this.myEchart2.getOption()const option3 = this.myEchart3.getOption()// 清空数据option1.series = []option1.xAxis[0].data = []option2.series = []option2.xAxis[0].data …...

数据结构入门:栈

目录 前言 1. 栈 1.1栈的概念及结构 1.2 栈的实现 1.2.1 栈的定义 1.2.2 栈的初始化 1.2.3 入栈 1.2.4 出栈 1.2.5 栈的元素个数 1.2.6 栈顶数据 1.2.7 栈的判空 2.栈的应用 2.1 题目一&#xff1a;括号匹配 2.1.1 思路 2.1.2 分析 2.1.3 题解 总结 前言 无论你是计算机科学专…...

《UNUX环境高级编程》(14)高级I/O

1、引言 2、 非阻塞I/O 系统调用分为两类&#xff1a;低速系统调用和其他系统调用。低速系统调用是可能会使进程永远阻塞的一类系统调用&#xff0c;包括&#xff1a; 如果某些文件类型&#xff08;如读管道、终端设备和网络设备&#xff09;的数据并不存在&#xff0c;读操作…...

UABEA:解锁Unity资源编辑新维度的跨平台工具箱

UABEA&#xff1a;解锁Unity资源编辑新维度的跨平台工具箱 【免费下载链接】UABEA c# uabe for newer versions of unity 项目地址: https://gitcode.com/gh_mirrors/ua/UABEA 你是否曾想过深入Unity游戏内部&#xff0c;查看、编辑甚至重构其中的纹理、音频、字体等各类…...

你的Windows Defender是否正在拖慢系统性能?3步彻底解决方案

你的Windows Defender是否正在拖慢系统性能&#xff1f;3步彻底解决方案 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_mirro…...

3大核心功能:智慧树网课自动化学习解决方案

3大核心功能&#xff1a;智慧树网课自动化学习解决方案 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 诊断学习痛点 在线教育平台在提供便利的同时&#xff0c;也带来…...

MinerU 2.5-1.2B镜像体验报告:PDF转Markdown,效果远超传统工具

MinerU 2.5-1.2B镜像体验报告&#xff1a;PDF转Markdown&#xff0c;效果远超传统工具 1. 引言&#xff1a;为什么选择MinerU&#xff1f; 1.1 传统工具的局限性 在日常工作中&#xff0c;我们经常需要将PDF文档转换为Markdown格式。传统的工具如PyPDF2、pdfplumber在处理简…...

Qwen3.5-35B-A3B-AWQ-4bit企业降本增效案例:替代人工审核10万+商品图的自动化方案

Qwen3.5-35B-A3B-AWQ-4bit企业降本增效案例&#xff1a;替代人工审核10万商品图的自动化方案 1. 企业面临的商品图审核挑战 在电商行业&#xff0c;商品图片审核是一项繁重但至关重要的工作。以某大型电商平台为例&#xff0c;每天需要审核超过10万张商品图片&#xff0c;传统…...

小杰云商城系统源码/小程序源码平台/电商系统源码/完整版/全开源

小杰云商城系统源码 完整版 全开源 基于多款经典商城深度优化重构&#xff0c;不管是功能、颜值、安全、流畅度&#xff0c;直接给你干到天花板! 完美适配易支付V2和mapi支付&#xff0c;拿到手简单配置就能上线运营&#xff0c;不用你再费劲改接口! 功能多到爆炸&#xff0…...

像素剧本圣殿详细步骤:如何重置时空+保存平行宇宙创作记录

像素剧本圣殿详细步骤&#xff1a;如何重置时空保存平行宇宙创作记录 1. 认识像素剧本圣殿 像素剧本圣殿是一款基于Qwen2.5-14B-Instruct深度微调的专业剧本创作工具。它将强大的AI推理能力与独特的8-Bit复古美学相结合&#xff0c;为创作者提供了一个沉浸式的剧本开发环境。…...

Qwen3.5-9B企业应用:法务合同关键条款提取+风险点标注案例

Qwen3.5-9B企业应用&#xff1a;法务合同关键条款提取风险点标注案例 1. 项目背景与价值 在法务工作中&#xff0c;合同审查是一项耗时且容易出错的任务。传统的人工审查方式需要律师逐条阅读合同文本&#xff0c;识别关键条款并标注潜在风险点&#xff0c;这个过程通常需要数…...

开源协议解析与合规实践指南

1. 开源协议的本质与重要性作为一名在软件行业摸爬滚打十多年的开发者&#xff0c;我见过太多因为忽视开源协议而引发的纠纷案例。记得2018年某创业团队就因误用GPL协议代码导致整个产品被迫开源&#xff0c;最终项目流产。开源协议绝非一纸空文&#xff0c;它直接关系到开发者…...

新手福音:用快马平台理解openclaw架构图并生成你的第一个应用

新手福音&#xff1a;用快马平台理解openclaw架构图并生成你的第一个应用 作为一个刚入门的开发者&#xff0c;第一次看到openclaw架构图时&#xff0c;那些方框和箭头让我一头雾水。直到在InsCode(快马)平台上动手实践后&#xff0c;才发现原来架构图可以这么直观。下面分享我…...