vue3的生命周期有哪些

embedded/2024/9/25 12:35:07/
vue3的生命周期:1、beforecreate;2、created;3、beforemount;4、mounted;5、beforeupdate;6、updated;7、beforedestroy;8、destroyed;9、activated;10、deactivated;11、errorcaptured;12、getderivedstatefromprops等等。

vue3的生命周期有哪些

Vue 3 引入了新的生命周期钩子函数,并对一些旧的钩子函数进行了重构或删除。以下是一些 Vue 3 的生命周期钩子函数:

1、beforeCreate:在实例创建之前调用,此时还没有挂载,数据观测 (data observer) 和事件尚未初始化。

2、created:实例创建完成后调用,此时已经完成了数据观测 (data observer) 和事件初始化,但尚未挂载 DOM。

3、beforeMount:在挂载之前调用,相关的 render 函数首次被调用。可以在此时对模板进行编译和渲染。

立即学习“前端免费学习笔记(深入)”;

4、mounted:实例已经挂载到 DOM 上后调用。在这个时候,所有的 el 和 ref 都已经被解析,并且 $refs 已经被填充。

5、beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。可以在此时进行状态更新或手动更改 DOM。

6、updated:数据更新完成后调用,发生在虚拟 DOM 打补丁和 DOM 更新之后。

7、beforeDestroy:实例销毁之前调用。在这个阶段,实例仍然完全可用。

8、destroyed:实例销毁后调用。调用后,所有的事件监听器和子组件都将被移除,所有的子组件的 destroyed 钩子也会被调用。

9、activated:当被激活的 keep-alive 组件重新进入时调用。

10、deactivated:当被激活的 keep-alive 组件离开时调用。

11、errorCaptured:在捕获阶段处理错误时调用。如果这个钩子没有返回值,或者返回 false,那么父组件的 errorCaptured 钩子会被继续调用;否则,该错误不会被进一步处理。

12、getDerivedStateFromProps:在每次渲染之前都会调用,用于从 props 派生出状态。这是一个静态方法,可以在组件创建之前或在组件销毁之后进行更改。

13、renderTracked 和 renderTriggered:这两个钩子是在渲染过程中触发的,前者在跟踪渲染时触发,后者在强制触发渲染时触发。

14、setup:在 Vue 3 中,组件选项 API 被 Composition API 替代。setup 函数是 Composition API 的入口点,用于组织和复用组件逻辑。它是一个新的、更强大、更灵活的方式来定义组件选项。

以上就是 Vue 3 的生命周期钩子函数。需要注意的是,由于 Vue 3 对底层进行了大量优化,一些旧的钩子函数(如 init、ready 等)已被移除或合并到其他钩子函数中。同时,Vue 3 也新增了一些用于优化性能和错误处理的钩子函数,如 activated、deactivated、errorCaptured 等。


http://www.ppmy.cn/embedded/116608.html

相关文章

2.数据库-第二章数据库数据管理

2.数据库-第二章数据库数据管理 文章目录 2.数据库-第二章数据库数据管理DML1.新增:2.修改:3.删除: DML 1.新增: ​ insert into 表名[(列1,列2…)]values(值1,值2) 当出现多条插入时 使用逗号,隔开 inser into grade(GradeName) values("S1&qu…

zynq的PS端mac与RTL8211F的连接要点

目录 1 VCCO_MIO12 PS_MIO_VREF3 PS的引脚4 RXDLY TXDLY5 ZYNQ的MAC可以调整延时吗 1 VCCO_MIO1 接1.8V 2 PS_MIO_VREF 接0.9V,可通过电阻分压 可通过电阻分压 3 PS的引脚 4 RXDLY TXDLY RXDLY RXD[0] TXDLY RXD[1] 与XC7Z020的PS端MAC连接,必须…

LeetCode 210. 课程表 II

LeetCode 210. 课程表 II 现在你总共有 numCourses 门课需要选,记为 0 到 numCourses - 1。给你一个数组 prerequisites ,其中 prerequisites[i] [ai, bi] ,表示在选修课程 ai 前 必须 先选修 bi 。 例如,想要学习课程 0 &#x…

如何批量获取安卓设备上所有应用的桌面图标

文章目录 概述一、准备工作1.1 安装 ADB安装 ADB:1.2 获取设备上的应用包名1.3 使用 ADB 导出 APK 文件 二、提取桌面图标流程2.1 反编译 APK 文件2.2 解析 AndroidManifest.xml2.3 搜索图标资源文件 三、 编写 Python 自动化工具3.1 代码结构3.2 运行脚本 四、错误…

架构面试题

架构基础 如何理解架构的演进? 架构的演进指的是随着技术、业务和需求的不断发展,架构在设计和实施上的变化和进化过程。这包括从单体应用向微服务架构的过渡、从传统的服务器部署向云原生架构的转变,以及在数据处理、安全性和性能优化等方…

MyBatis 缓存机制

MyBatis 缓存机制详解 MyBatis 提供了一种内置的缓存机制,用来提高数据查询的效率。通过缓存,MyBatis 可以减少对数据库的访问,提升系统性能。MyBatis 缓存分为 一级缓存(Local Cache) 和 二级缓存(Global…

基于单片机的精确电压表DA-AD转换

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机,采用DAC0832和ADC0832检测电压,0到8.5V,设计复位电路 LED管显示实际稳压值,初始电压0 二、硬件资源 基于KEIL5编写C代码&#xff0c…

Mac 命令行常用操作笔记

1. 启用和禁用 Wi-Fi 打开 Wi-Fi: sudo networksetup -setairportpower "Wi-Fi" on 关闭 Wi-Fi: sudo networksetup -setairportpower "Wi-Fi" off 2. 搜索并连接 Wi-Fi 切换到 airport 工具目录: cd /System/Librar…