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

Vue---vue2和vue3的生命周期

核心生命周期对比

生命周期阶段Vue 2 钩子Vue 3 Composition API
​初始化​beforeCreate无(使用 setup() 替代)
​初始化完成​created无(使用 setup() 替代)
​挂载前​beforeMountonBeforeMount
​挂载完成​mountedonMounted
​更新前​beforeUpdateonBeforeUpdate
​更新完成​updatedonUpdated
​卸载前​beforeDestroyonBeforeUnmount
​卸载完成​destroyedonUnmounted
​错误处理​errorCapturedonErrorCaptured
​激活(KeepAlive)​activatedonActivated
​停用(KeepAlive)​deactivatedonDeactivated
​服务端渲染​serverPrefetchonServerPrefetch

 Vue 3 核心变化​

  1. ​钩子重命名​

    • beforeDestroy → beforeUnmount
    • destroyed → unmounted
    • ​原因​​:更准确的语义表达(卸载 vs 销毁)
  2. ​Composition API​

    • 通过 setup() 函数替代 beforeCreate 和 created
    • 使用 onXxx 形式导入生命周期函数:
      import { onMounted, onUnmounted } from 'vue'export default {setup() {onMounted(() => {console.log('组件已挂载')})}
      }
  3. ​执行顺序​

    • 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 系列 题解

从二维数点&#xff08;二维偏序&#xff09;到三维偏序。 用 cdq 分治可以解决二维数点问题。 1.洛谷 P1908 逆序对 题意 求所有数对 ( i , j ) (i,j) (i,j) 的个数&#xff0c;满足 i < j i<j i<j 且 a i > a j a_i>a_j ai​>aj​。 1 ≤ n ≤ 5 1…...

稳压二极管详解:原理、作用、应用与选型要点

一、稳压二极管的基本定义 稳压二极管&#xff08;齐纳二极管&#xff0c;Zener Diode&#xff09; 是一种利用反向击穿特性实现电压稳定的半导体器件。其核心特性是&#xff1a;在反向击穿时&#xff0c;两端电压几乎恒定&#xff08;Vz&#xff09;&#xff0c;且不会因电流…...

如何在量子计算时代保障 Sui 的安全性

量子计算的出现对依赖加密机制的系统构成了重大威胁。区块链依赖加密技术来进行身份管理、安全交易和数据完整性保护&#xff0c;而量子计算具备打破传统加密模型的能力&#xff0c;因此区块链面临特别严峻的挑战。 然而&#xff0c;Sui 天生具备“加密灵活性”&#xff0c;可…...

linux sysfs使用cat无显示的原因:返回值未赋值

在Linux驱动中通过sysfs定义的文件使用cat命令无显示&#xff0c;通常由以下原因导致&#xff1a; 1. show函数未正确实现 原因&#xff1a;show函数&#xff08;如show_status&#xff09;未正确填充缓冲区或返回有效字节数。 排查&#xff1a; // 错误示例&#xff1a;未写…...

Discuz论坛网站忘记管理员密码进不去管理中心怎么办?怎么改管理员密码?

Discuz论坛网站忘记管理员密码进不去管理中心怎么办&#xff1f;怎么改管理员密码&#xff1f;今天驰网飞飞和你分享 首先我们需要用到Discuz&#xff01;急诊箱tools.php这个文件&#xff0c;可在下载中心搜索关键词下载&#xff0c;下载好后将tools.php文件放到网站根目录&a…...

基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案,结合工商数据、供应链记录及舆情数据,实现隐性关联识别与动态风险评估

以下是基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案&#xff0c;结合工商数据、供应链记录及舆情数据&#xff0c;实现隐性关联识别与动态风险评估&#xff1a; 一、数据整合与图谱构建 多源数据融合与清洗 • 数据源&#xff1a;整合企业工商数据&#xff08;股权…...

数据结构第六章(五)-拓扑排序、关键路径

数据结构第六章&#xff08;五&#xff09; 图的应用&#xff08;二&#xff09;一、有向无环图二、拓扑排序1. AOV网2. 拓扑排序3. 逆拓扑排序 三、关键路径1.AOE网2.关键路径2.1 介绍2.2 关键路径的求法 总结 图的应用&#xff08;二&#xff09; 一、有向无环图 首先我们得…...

stc32单片机实现串口2M波特率满带宽传输

我需要实现已极高的速度用串口往上位机发送数据, 并且还不能占用mcu资源, 使用的单片机位stc32g8K64 我的方法是串口接收采用中断接收, 发送采用dma自动发送, 预先初始化16个64字节的缓冲区, 每次通过串口发送时, 先找到当前的空闲缓冲区, 然后往缓冲区里填充数据, 在dma传输完…...

uni-app 状态管理深度解析:Vuex 与全局方案实战指南

uni-app 状态管理深度解析&#xff1a;Vuex 与全局方案实战指南 一、Vuex 使用示例 1. 基础 Vuex 配置 1.1 项目结构 src/ ├── store/ │ ├── index.js # 主入口文件 │ └── modules/ │ └── counter.js # 计数器模块 └── main.js …...

STM32之DHT11温湿度传感器---附代码

DHT11简介 DHT11的供电电压为 3&#xff0d;5.5V。 传感器上电后&#xff0c;要等待 1s 以越过不稳定状态在此期间无需发送任何指令。 电源引脚&#xff08;VDD&#xff0c;GND&#xff09;之间可增加一个100nF 的电容&#xff0c;用以去耦滤波。 DATA 用于微处理器与DHT11之间…...

Fluent 内置双向流固耦合FSI 液舱晃荡仿真计算

本案例利用Fluent 内置双向流固耦合FSI对液舱晃荡仿真展开了计算&#xff0c;提供了一种更为便捷快速的分析方法&#xff0c;对不同杨氏模量的液舱内部构件进行分析&#xff0c;后续可以通过该案例对不同的双向流固耦合模型展开计算分析。 1 SCDM 设置 1.1 导入几何 本案例根…...

嵌入式开发板调试方式完全指南:串口/SSH/Telnet及其他方式对比

文章目录 &#x1f4bb;嵌入式开发板调试方式完全指南&#xff1a;串口/SSH/Telnet及其他方式对比一、为什么需要连接嵌入式开发板❓二、串口调试&#xff1a;最古老的调试方式仍在发光&#x1f3db;️2.1 什么是串口调试&#xff1f; 三、SSH/Telnet&#xff1a;网络时代的调试…...

JavaScript数据结构与算法实战: 探秘Leetcode经典题目

# JavaScript数据结构与算法实战: 探秘Leetcode经典题目 第一章&#xff1a;掌握LeetCode经典题目 什么是LeetCode&#xff1f; 力扣&#xff09;是一个专门为程序员提供算法题目练习的平台&#xff0c;涵盖了广泛的题目类型&#xff0c;包括数据结构、算法、数据库等多个领域。…...

内网穿透实践:cpolar快速入门教程

最近有个朋友联系我&#xff0c;问我有没有方法将自己做的项目让别人也能访问到&#xff0c;我寻思这不就是外网映射的事情。于是我很愉快的和他说&#xff0c;你去买个云服务器就行&#xff0c;尽管我一再和他说&#xff0c;个人新用户能有免费试用期&#xff0c;但是本着又蠢…...

HAL库(STM32CubeMX)——高级ADC学习、HRTIM(STM32G474RBT6)

系列文章目录 文章目录 系列文章目录前言存在的问题HRTIMcubemx配置前言 对cubemx的ADC的设置进行补充 ADCs_Common_Settings Mode:ADC 模式 Independent mod 独立 ADC 模式,当使用一个 ADC 时是独立模式,使用两个 ADC 时是双模式,在双模式下还有很多细分模式可选 ADC_Se…...

Kafka 详细解读

1. Producer&#xff08;生产部卷王&#xff09; 职责&#xff1a;往 Kafka 里疯狂输出数据&#xff0c;KPI 是「日抛式消息海啸」 职场人设&#xff1a; 白天开会画饼&#xff0c;深夜写周报的奋斗逼&#xff0c;口头禅是「这个需求今晚必须上线&#xff01;」代码里的「福报…...

Python爬虫实战:获取高考网专业数据并分析,为志愿填报做参考

一、引言 高考志愿填报是考生人生的关键节点,合理的志愿填报能为其未来发展奠定良好基础。计算机类专业作为当下热门领域,相关信息对考生填报志愿至关重要。教育在线网站虽提供丰富的计算机类专业数据,但存在反爬机制,增加了数据获取难度。本研究借助 Scrapy 爬虫技术及多…...

Ubuntu下展锐刷机工具spd_dump使用说明

spd_dump使用说明 源码地址&#xff1a;https://github.com/ilyakurdyukov/spreadtrum_flash 编译环境准备&#xff1a; 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&#xff0c;下拉框里选择eslint 2、并勾选Enables ESlint as a formatter 3、再在settings.json文件中添加配置代码&#xff0c;如下所示&#xff1a; 1&#xff09; 、打开 VS Code 设置 快捷键&#xff1a;Ctrl ,&#xff08;Mac: ⌘ ,…...