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

UE5-MCP终极教程:3步实现AI自动化游戏场景创作

UE5-MCP终极教程&#xff1a;3步实现AI自动化游戏场景创作 【免费下载链接】UE5-MCP MCP for Unreal Engine 5 项目地址: https://gitcode.com/gh_mirrors/ue/UE5-MCP 你是否曾梦想过用一句话就能创造出令人惊叹的游戏场景&#xff1f;UE5-MCP&#xff08;Unreal Engine…...

ModTheSpire开源工具:5大核心策略提升Slay The Spire模组体验

ModTheSpire开源工具&#xff1a;5大核心策略提升Slay The Spire模组体验 【免费下载链接】ModTheSpire External mod loader for Slay The Spire 项目地址: https://gitcode.com/gh_mirrors/mo/ModTheSpire 一、环境部署与资源配置&#xff1a;从零开始的模组加载器搭建…...

利用快马平台十分钟搭建reframework机器人流程自动化原型

利用快马平台十分钟搭建reframework机器人流程自动化原型 最近工作中需要快速验证一个机器人流程自动化&#xff08;RPA&#xff09;的想法&#xff0c;但搭建完整开发环境太费时间。尝试了InsCode(快马)平台后&#xff0c;发现它简直是快速原型开发的利器。下面分享我是如何在…...

AI建站避坑指南:高频问题与真相解答,别再交学费

决定用AI建站工具&#xff0c;是通往高效的第一步。但市面上信息繁杂&#xff0c;一个不小心就可能掉进“智能”的陷阱。这篇整理了用户最关心的10个核心问题&#xff0c;给出客观、可落地的解答&#xff0c;帮你提前排雷&#xff0c;做出真正明智的选择。1问题1&#xff1a;智…...

Windows Defender Remover完整指南:如何彻底移除Windows安全组件

Windows Defender Remover完整指南&#xff1a;如何彻底移除Windows安全组件 【免费下载链接】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_m…...

为什么传统PDF翻译总是破坏格式?BabelDOC如何5分钟实现专业文档精准翻译

为什么传统PDF翻译总是破坏格式&#xff1f;BabelDOC如何5分钟实现专业文档精准翻译 【免费下载链接】BabelDOC Yet Another Document Translator 项目地址: https://gitcode.com/GitHub_Trending/ba/BabelDOC 你是否曾经尝试翻译一份学术论文或技术文档&#xff0c;却发…...

文墨共鸣部署案例:中小企业低成本部署水墨风语义分析SaaS前端

文墨共鸣部署案例&#xff1a;中小企业低成本部署水墨风语义分析SaaS前端 1. 项目介绍与价值 文墨共鸣是一个将深度学习技术与传统水墨美学完美结合的语义分析系统。这个项目专门为中文文本设计&#xff0c;能够智能分析两段文字之间的语义相似度&#xff0c;判断它们是"…...

3个核心技巧:快速掌握Blender 3MF插件的完整工作流

3个核心技巧&#xff1a;快速掌握Blender 3MF插件的完整工作流 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 你是否在为3D打印工作流中的文件格式转换烦恼&#xff1f;…...

OpenClaw定时任务技巧:让Kimi-VL-A3B-Thinking自动处理每日图文简报

OpenClaw定时任务技巧&#xff1a;让Kimi-VL-A3B-Thinking自动处理每日图文简报 1. 为什么需要自动化图文简报 每天早上打开电脑&#xff0c;我的第一件事就是浏览行业资讯、技术博客和社交媒体&#xff0c;把有价值的内容整理成简报。这个过程通常要花费30-45分钟&#xff0…...

AgentCPM-Report部署教程:Pixel Epic在Ubuntu/CentOS下的环境配置

AgentCPM-Report部署教程&#xff1a;Pixel Epic在Ubuntu/CentOS下的环境配置 1. 项目介绍 Pixel Epic是一款基于AgentCPM-Report大模型构建的研究报告辅助终端&#xff0c;它将枯燥的科研工作转化为一场像素风格的RPG冒险体验。与传统AI工具不同&#xff0c;Pixel Epic采用了…...