[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/ 账号࿱…...
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><!-…...
文件传输软件常见问题解决办法大全
文件传输软件是我们工作中不可缺少的一种工具,它可以帮助我们快速、安全、稳定地传输各种文件,如文档、图片、视频等。但是在使用文件传输软件的过程中,我们也可能会遇到一些问题,影响我们的工作效率和传输质量。那么,…...
springboot工程测试临时数据修改技巧
目录 properties临时属性测试注入 args临时参数测试注入 bean配置类属性注入(Import) SpringBootTest是一个注解,用于测试Spring Boot应用程序。它可用于指示Spring Boot测试应用程序的启动点,并为测试提供一个可用的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 题目一:括号匹配 2.1.1 思路 2.1.2 分析 2.1.3 题解 总结 前言 无论你是计算机科学专…...
《UNUX环境高级编程》(14)高级I/O
1、引言 2、 非阻塞I/O 系统调用分为两类:低速系统调用和其他系统调用。低速系统调用是可能会使进程永远阻塞的一类系统调用,包括: 如果某些文件类型(如读管道、终端设备和网络设备)的数据并不存在,读操作…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中,部分节点存储的数据量或访问量远高于其他节点,导致这些节点负载过高,影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
FFmpeg:Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】,注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录(即exe所在文件夹)加入系统变量…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
uniapp 小程序 学习(一)
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 :开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置,将微信开发者工具放入到Hbuilder中, 打开后出现 如下 bug 解…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
