Vue---vue2和vue3的生命周期
核心生命周期对比
生命周期阶段 | Vue 2 钩子 | Vue 3 Composition API |
---|---|---|
初始化 | beforeCreate | 无(使用 setup() 替代) |
初始化完成 | created | 无(使用 setup() 替代) |
挂载前 | beforeMount | onBeforeMount |
挂载完成 | mounted | onMounted |
更新前 | beforeUpdate | onBeforeUpdate |
更新完成 | updated | onUpdated |
卸载前 | beforeDestroy | onBeforeUnmount |
卸载完成 | destroyed | onUnmounted |
错误处理 | errorCaptured | onErrorCaptured |
激活(KeepAlive) | activated | onActivated |
停用(KeepAlive) | deactivated | onDeactivated |
服务端渲染 | serverPrefetch | onServerPrefetch |
Vue 3 核心变化
-
钩子重命名
beforeDestroy
→beforeUnmount
destroyed
→unmounted
- 原因:更准确的语义表达(卸载 vs 销毁)
-
Composition API
- 通过
setup()
函数替代beforeCreate
和created
- 使用
onXxx
形式导入生命周期函数:import { onMounted, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('组件已挂载')})} }
- 通过
-
执行顺序
- Composition API 生命周期比 Options API 更早执行
- 顺序示例:父组件 setup() → 父组件 onBeforeMount → 子组件 setup() → 子组件 onBeforeMount → 子组件 onMounted → 父组件 onMounted
生命周期阶段详解
1. 初始化阶段(setup
/beforeCreate
/created
)
- Vue2:
beforeCreate
:实例初始化,数据观测/事件配置前created
:实例创建完成,可访问data
/methods
,但 DOM 未挂载
- Vue3:
setup()
:替代beforeCreate
和created
,所有组合式逻辑在此初始化- 注意:
setup()
中无法访问this
2. 挂载阶段(onBeforeMount
/onMounted
)
-
onBeforeMount
:- 模板编译完成,虚拟 DOM 已生成,但尚未挂载到真实 DOM
- 使用场景:SSR 中避免 DOM 操作
-
onMounted
:- DOM 已挂载,可操作 DOM 或初始化第三方库(如图表、地图)
- 注意:子组件的
mounted
先于父组件执行
3. 更新阶段(onBeforeUpdate
/onUpdated
)
-
onBeforeUpdate
:- 数据变化导致虚拟 DOM 重新渲染前
- 使用场景:获取更新前的 DOM 状态
-
onUpdated
:- 虚拟 DOM 已重新渲染并应用更新
- 注意:避免在此修改状态,可能导致无限循环
4. 卸载阶段(onBeforeUnmount
/onUnmounted
)
-
onBeforeUnmount
:- 实例销毁前,仍可访问组件状态
- 使用场景:清除定时器、取消事件监听
-
onUnmounted
:- 实例已销毁,所有绑定已移除
- 注意:无法再访问组件内的任何数据
面试重点
Vue3 为什么移除 beforeCreate
和 created
?
setup()
函数统一处理初始化逻辑,更符合组合式 API 设计理念,减少冗余钩子。
setup()
中能访问 this
吗?为什么?
不能。setup()
在实例初始化前执行,此时组件实例尚未创建。
父子组件生命周期执行顺序?
- 挂载阶段:父
beforeMount
→ 子beforeMount
→ 子mounted
→ 父mounted
- 更新阶段:父
beforeUpdate
→ 子beforeUpdate
→ 子updated
→ 父updated
- 卸载阶段:父
beforeUnmount
→ 子beforeUnmount
→ 子unmounted
→ 父unmounted
在 mounted
中修改数据会发生什么?
触发更新流程,依次执行 beforeUpdate
和 updated
钩子。需注意避免死循环。
相关文章:
Vue---vue2和vue3的生命周期
核心生命周期对比 生命周期阶段Vue 2 钩子Vue 3 Composition API初始化beforeCreate无(使用 setup() 替代)初始化完成created无(使用 setup() 替代)挂载前beforeMountonBeforeMount挂载完成moun…...
C#常用LINQ
在开发时发现别人的代码使用到了LINQ十分便捷且清晰,这里记录一下常用LINQ和对应的使用。参考链接:LINQ 菜鸟教程 使用的学生类和字符串用于测试 public class Student {public int StudentID;public string StudentName;public int Age; }Student[] st…...
Java--数组的应用
一、数组的地址值 数组的地址值表示数组在内存中的位置。 [I1eb44e46 [ :表示当前是一个数组I:表示当前数组是int类型:表示一个间隔符号(固定格式)1eb44e46:数组真正的地址值(十六进制&#…...
PostgreSQL基础
一、PostgreSQL介绍 PostgreSQL是一个功能强大的 开源 的关系型数据库。底层基于C实现。 PostgreSQL的开源协议和Linux内核版本的开源协议是一样的。。BDS协议,这个协议基本和MIT开源协议一样,说人话,就是你可以对PostgreSQL进行一些封装&a…...
Linux系统管理与编程13:基于CentOS7.x的LAMP环境部署
兰生幽谷,不为莫服而不芳; 君子行义,不为莫知而止休。 一、实验目标 1.理解Apache服务器原理 2.掌握Apache服务器的配置文件 3.具备安装Mysql数据库能力 4.具备安装Apache服务器能力 5.具备PHP与数据库连接能力 6.具备Apache、Mysql、…...
浅谈AI致幻
文章目录 当前形势下存在的AI幻觉(AI致幻)什么是AI幻觉AI幻觉的类型为什么AI会产生幻觉AI幻觉的危害与影响当前应对AI幻觉的技术与方法行业与学术界的最新进展未来挑战与展望结论 当前形势下存在的AI幻觉(AI致幻) 什么是AI幻觉 …...
【架构】-- StarRocks 和 Doris 介绍与选型建议
StarRocks 和 Doris 的介绍 随着大数据分析需求的不断增长,企业对高性能、低延迟的分析型数据库提出了更高的要求。StarRocks 和 Apache Doris 是当前主流的开源 MPP(Massively Parallel Processing)数据库系统,广泛应用于实时分析、报表生成和数据仓库等场景。本文将从架…...
【SF顺丰】顺丰开放平台API对接(注册、API测试篇)
1.注册开发者账号 注册地址:顺丰企业账户中心 2.登录开发平台 登录地址:顺丰开放平台 3.开发者对接 点击开发者对接 4.创建开发对接应用 开发者应用中“新建应用”创建应用,最多创建应用限制数量5个 注意:需要先复制保存生产校验…...
C语言高频面试题——常量指针与指针常量区别
1. 常量指针(Pointer to Constant) 定义: 常量指针是指向一个常量数据的指针,即指针指向的内容不能通过该指针被修改。 语法: const int* ptr;或者: int const* ptr;解释: const修饰的是指…...
Novartis诺华制药社招入职综合能力测评真题SHL题库考什么?
一、综合能力测试 诺华制药的入职测评中,综合能力测试是重要的一部分,主要考察应聘者的问题解决能力、数值计算能力和逻辑推理能力。测试总时长为46分钟,实际作答时间为36分钟,共24题。题型丰富多样,包括图形变换题、分…...
网页下载的m3u8格式文件使用FFmpeg转为MP4
FFmpeg 是一个强大的开源音视频处理工具,可以直接将 M3U8 合并并转换为 MP4。 1.步骤: 下载 FFmpeg 官网:https://ffmpeg.org/ Windows 用户可以直接下载 静态构建版本(Static Build),解压后即可使用。 2…...
Java 并发包核心机制深度解析:锁的公平性、异步调度、AQS 原理全解
🧠 Java 并发包核心机制深度解析:锁的公平性、异步调度、AQS 原理全解 Java 并发编程的地基是 java.util.concurrent,但真正驱动这个系统的,是它背后隐藏的三根支柱: ReentrantLock 的公平/非公平调度策略Completabl…...
μC/OS 版本演进过程 | uC/OS-II 和 uC/OS-III 有什么区别?
uC/OS 系列是由 Jean J. Labrosse 开发的一套嵌入式实时操作系统(RTOS),以其高质量源码和清晰的结构,在嵌入式教学和某些工业项目中有着广泛影响。该系统主要包含两个版本:uC/OS-II 和 uC/OS-III。 本文将带你了解这两…...
永磁同步电机参数辨识算法--递推最小二乘法辨识
一、原理介绍 最小二乘法大约是1795年高斯在其著名的星体运动轨道预报研究工作中提出的。后来,最小二乘法成为了估计理论的基石。最小二乘法由于原理简明、收敛较快、易于编程实现等特点,在系统参数估计中应用相当广泛。 其基本原理为: 改写…...
树莓派5+L298N控制电机
准备工作: 树莓派5开发板L298N 控制板电机1个12v的电池1个杜邦线若干L298N 引脚介绍 (1)图中标注的1和2都是都在输出引脚,可以各接入一个电机,电机不分正负极,随便接 (2)图中3这里是控制板的电源输入正负极,可以输入5v和12v,我这里输入的是12v电源,使用的时候应该把…...
UofTCTF-2025-web-复现
感兴趣朋友可以去我博客里看,画风更好看 UofTCTF-2025-web-复现 文章目录 scavenger-huntprismatic-blogscode-dbprepared-1prepared-2timeless scavenger-hunt 国外的一些ctf简单题就喜欢把flag藏在注释里,开源代码找到第一部分的flag 抓个包返回数据…...
记录seatunnel排查重复数据的案例分析
文章目录 背景分析检查现象检查B集群是否有异常,导致重复消费的分析同步任务 修复问题发现flink job 一直报异常修复问题 背景 使用seatunnel 同步数据从A 集群kafka 同步到B集群kafka,现象是发现两边数据不一致,每天10w级别会多几十条数据 分析 检查…...
技术速递|Agent 模式:对所有用户开放,并支持 MCP
作者:Isidor Nikolic 翻译/排版:Alan Wang Agent 模式正在向所有 VS Code 用户推广!它充当一个自主的配对编程助手,能够根据你的指令执行多步编码任务,例如分析代码库、提出文件修改建议以及运行终端命令。它能够响应编…...
实验四 Java图形界面与事件处理
实验四 Java图形界面与事件处理 ###实验目的 掌握Java语言中AWT和Swing组件的基本用法掌握Java语言中的事件处理方法掌握Java语言中事件源、监视器和处理事件的接口的概念 ###实验内容 图形用户界面设计程序(ArtFont.java)(90分) 要求:设…...
day2 python训练营
浙大疏锦行 python训练营介绍...
Linux下 REEF3D及DIVEMesh 源码编译安装及使用
目录 软件介绍 基本依赖 一、源码下载 1、REEF3D 2、DIVEMesh 二、解压缩 三、编译安装 1、REEF3D 2、DIVEMesh 四、算例测试 软件介绍 REEF3D是一款开源流体动力学框架,提供计算流体力学及波浪模型。软件采用高效并行化设计,可以在大规模处理器…...
堡垒机和跳板机之区别(The Difference between Fortress and Springboard Aircraft)
堡垒机和跳板机之区别 在网络安全、安全运维领域,堡垒机和跳板机是两个常被提及且功能相似的概念,但它们在实际应用、功能定位以及技术实现上存在着明显的差异。本文将对堡垒机和跳板机进行详细的解析与比较,帮助读者更好地理解这两种网络安…...
《Android 应用开发基础教程》——第五章:RecyclerView 列表视图与适配器机制
目录 第五章:RecyclerView 列表视图与适配器机制 5.1 为什么要使用 RecyclerView? 5.2 基本结构图 5.3 RecyclerView 使用步骤 1️⃣ 添加 RecyclerView 依赖(Android Studio) 2️⃣ 布局文件(activity_main.xml&…...
【第四章】19-匹配规则定义
在优化Web服务器性能与增强其功能性的过程中,深入理解Nginx的location匹配规则显得尤为关键。它不仅决定了如何高效地路由不同类型的客户端请求,而且是实现精准响应的基础。通过掌握精确匹配、前缀匹配及正则表达式匹配等规则,管理员能够灵活配置以支持复杂的业务需求,同时…...
[PTA]2025CCCC-GPLT天梯赛 现代战争
来源:L1-112 现代战争-Pintia题意:给定 n m n\times m nm 的矩阵,进行 k k k 次操作,每次操作清除矩阵当前最大值所在行和所在列的全部元素,求最终矩阵。关键词:模拟(签到)题解:非常水的模拟…...
操作系统期中复习
未完待续----后续补充全书完整板 一、计算机系统概述 1.1操作系统的基本概念 1.1.1操作系统的概念 操作系统:是指控制和管理整个计算机系统的硬件与软件资源,合理地组织、调度计算机的工作与资源的分配,进而为用户和其他软件提供方便接口…...
Linux 入门十一:Linux 网络编程
一、概述 1. 网络编程基础 网络编程是通过网络应用编程接口(API)编写程序,实现不同主机上进程间的信息交互。它解决的核心问题是:如何让不同主机上的程序进行通信。 2. 网络模型:从 OSI 到 TCP/IP OSI 七层模型&…...
车载软件架构 --- 二级boot设计说明需求规范
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 周末洗了一个澡,换了一身衣服,出了门却不知道去哪儿,不知道去找谁,漫无目的走着,大概这就是成年人最深的孤独吧! 旧人不知我近况,新人不知我过…...
在Ubuntu下用Chrony做主从机时间同步
主机 下载chrony sudo apt install chrony修改配置文件: sudo gedit /etc/chrony/chrony.conf# Welcome to the chrony configuration file. See chrony.conf(5) for more # information about usuable directives.# This will use (up to): # - 4 sources fro…...
开箱即用:一款带世界时钟简约好用在线时间戳转换工具源码
这款工具简直是为“时间管理大师”和“国际化玩家”量身定制!它不仅支持全球十大热门语言,还能无缝切换多时区,帮你轻松搞定时间戳和日期的转换。重点是,它完全前端实现,无需复杂后端,部署起来比泡杯咖啡还简单!开发人员可以在本地电脑运行来进行时间戳装换,还可以加Ad…...
代码随想录第22天:回溯算法4
一、全排列(Leetcode 46) 与组合问题不同,排列问题要注意2个特点: 每层都是从0开始搜索而不是startIndex需要used数组记录path里都放了哪些元素 class Solution:def permute(self, nums):result [] # 存储所有的排列self.back…...
cdq 系列 题解
从二维数点(二维偏序)到三维偏序。 用 cdq 分治可以解决二维数点问题。 1.洛谷 P1908 逆序对 题意 求所有数对 ( i , j ) (i,j) (i,j) 的个数,满足 i < j i<j i<j 且 a i > a j a_i>a_j ai>aj。 1 ≤ n ≤ 5 1…...
稳压二极管详解:原理、作用、应用与选型要点
一、稳压二极管的基本定义 稳压二极管(齐纳二极管,Zener Diode) 是一种利用反向击穿特性实现电压稳定的半导体器件。其核心特性是:在反向击穿时,两端电压几乎恒定(Vz),且不会因电流…...
如何在量子计算时代保障 Sui 的安全性
量子计算的出现对依赖加密机制的系统构成了重大威胁。区块链依赖加密技术来进行身份管理、安全交易和数据完整性保护,而量子计算具备打破传统加密模型的能力,因此区块链面临特别严峻的挑战。 然而,Sui 天生具备“加密灵活性”,可…...
linux sysfs使用cat无显示的原因:返回值未赋值
在Linux驱动中通过sysfs定义的文件使用cat命令无显示,通常由以下原因导致: 1. show函数未正确实现 原因:show函数(如show_status)未正确填充缓冲区或返回有效字节数。 排查: // 错误示例:未写…...
Discuz论坛网站忘记管理员密码进不去管理中心怎么办?怎么改管理员密码?
Discuz论坛网站忘记管理员密码进不去管理中心怎么办?怎么改管理员密码?今天驰网飞飞和你分享 首先我们需要用到Discuz!急诊箱tools.php这个文件,可在下载中心搜索关键词下载,下载好后将tools.php文件放到网站根目录&a…...
基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案,结合工商数据、供应链记录及舆情数据,实现隐性关联识别与动态风险评估
以下是基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案,结合工商数据、供应链记录及舆情数据,实现隐性关联识别与动态风险评估: 一、数据整合与图谱构建 多源数据融合与清洗 • 数据源:整合企业工商数据(股权…...
数据结构第六章(五)-拓扑排序、关键路径
数据结构第六章(五) 图的应用(二)一、有向无环图二、拓扑排序1. AOV网2. 拓扑排序3. 逆拓扑排序 三、关键路径1.AOE网2.关键路径2.1 介绍2.2 关键路径的求法 总结 图的应用(二) 一、有向无环图 首先我们得…...
stc32单片机实现串口2M波特率满带宽传输
我需要实现已极高的速度用串口往上位机发送数据, 并且还不能占用mcu资源, 使用的单片机位stc32g8K64 我的方法是串口接收采用中断接收, 发送采用dma自动发送, 预先初始化16个64字节的缓冲区, 每次通过串口发送时, 先找到当前的空闲缓冲区, 然后往缓冲区里填充数据, 在dma传输完…...
uni-app 状态管理深度解析:Vuex 与全局方案实战指南
uni-app 状态管理深度解析:Vuex 与全局方案实战指南 一、Vuex 使用示例 1. 基础 Vuex 配置 1.1 项目结构 src/ ├── store/ │ ├── index.js # 主入口文件 │ └── modules/ │ └── counter.js # 计数器模块 └── main.js …...
STM32之DHT11温湿度传感器---附代码
DHT11简介 DHT11的供电电压为 3-5.5V。 传感器上电后,要等待 1s 以越过不稳定状态在此期间无需发送任何指令。 电源引脚(VDD,GND)之间可增加一个100nF 的电容,用以去耦滤波。 DATA 用于微处理器与DHT11之间…...
Fluent 内置双向流固耦合FSI 液舱晃荡仿真计算
本案例利用Fluent 内置双向流固耦合FSI对液舱晃荡仿真展开了计算,提供了一种更为便捷快速的分析方法,对不同杨氏模量的液舱内部构件进行分析,后续可以通过该案例对不同的双向流固耦合模型展开计算分析。 1 SCDM 设置 1.1 导入几何 本案例根…...
嵌入式开发板调试方式完全指南:串口/SSH/Telnet及其他方式对比
文章目录 💻嵌入式开发板调试方式完全指南:串口/SSH/Telnet及其他方式对比一、为什么需要连接嵌入式开发板❓二、串口调试:最古老的调试方式仍在发光🏛️2.1 什么是串口调试? 三、SSH/Telnet:网络时代的调试…...
JavaScript数据结构与算法实战: 探秘Leetcode经典题目
# JavaScript数据结构与算法实战: 探秘Leetcode经典题目 第一章:掌握LeetCode经典题目 什么是LeetCode? 力扣)是一个专门为程序员提供算法题目练习的平台,涵盖了广泛的题目类型,包括数据结构、算法、数据库等多个领域。…...
内网穿透实践:cpolar快速入门教程
最近有个朋友联系我,问我有没有方法将自己做的项目让别人也能访问到,我寻思这不就是外网映射的事情。于是我很愉快的和他说,你去买个云服务器就行,尽管我一再和他说,个人新用户能有免费试用期,但是本着又蠢…...
HAL库(STM32CubeMX)——高级ADC学习、HRTIM(STM32G474RBT6)
系列文章目录 文章目录 系列文章目录前言存在的问题HRTIMcubemx配置前言 对cubemx的ADC的设置进行补充 ADCs_Common_Settings Mode:ADC 模式 Independent mod 独立 ADC 模式,当使用一个 ADC 时是独立模式,使用两个 ADC 时是双模式,在双模式下还有很多细分模式可选 ADC_Se…...
Kafka 详细解读
1. Producer(生产部卷王) 职责:往 Kafka 里疯狂输出数据,KPI 是「日抛式消息海啸」 职场人设: 白天开会画饼,深夜写周报的奋斗逼,口头禅是「这个需求今晚必须上线!」代码里的「福报…...
Python爬虫实战:获取高考网专业数据并分析,为志愿填报做参考
一、引言 高考志愿填报是考生人生的关键节点,合理的志愿填报能为其未来发展奠定良好基础。计算机类专业作为当下热门领域,相关信息对考生填报志愿至关重要。教育在线网站虽提供丰富的计算机类专业数据,但存在反爬机制,增加了数据获取难度。本研究借助 Scrapy 爬虫技术及多…...
Ubuntu下展锐刷机工具spd_dump使用说明
spd_dump使用说明 源码地址:https://github.com/ilyakurdyukov/spreadtrum_flash 编译环境准备: sudo apt update sudo apt install git sudo apt install build-essential sudo apt install libusb-1.0-0-devIf you create /etc/udev/rules.d/80-spd…...
配置 VS Code 使用 ESLint 格式化
1、在设置里面搜索Default Formatter,下拉框里选择eslint 2、并勾选Enables ESlint as a formatter 3、再在settings.json文件中添加配置代码,如下所示: 1) 、打开 VS Code 设置 快捷键:Ctrl ,(Mac: ⌘ ,…...