vue3的生命周期有哪些

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.xdnf.cn/news/1545424.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

STM32基础学习笔记-DHT11单总线协议面试基础题7

第七章、DHT11: 单总线协!议 常见问题 1、DHT11是什么 ?有什么特性 ? 2、单总线协议是什么 ?原理 ?DHT11的单总线协议的组成 ? ## 1、DHT11定义 单总线协议是一种用于在多个设备之间进行通信的协议,所有…

Calcite第一课

Calcite 是什么? 2024 年 9 月,最新版本 1.37.0 。前面三节我们先不看任何的源码,只从背景、介绍、概念、原理层面入手,作为深入学习和源码分析的预备。 如果用一句话形容 Calcite,Calcite 是一个用于优化异构数据源的…

2024年CSP-J认证 CCF信息学奥赛C++ 中小学初级组 第一轮真题-阅读程序题解析

2024 CCF认证第一轮&#xff08;CSP-J&#xff09;真题 二、阅读程序题 (程序输入不超过数组或字符串定义的范围&#xff0c;判断题正确填√错误填X;除特殊说明外&#xff0c;判断题 1.5分&#xff0c;选择题3分&#xff0c;共计40 分) 第一题 01 #include <iostream>…

【C++进阶】2024年了set、map还搞不懂底层细节?

&#x1f680;个人主页&#xff1a;小羊 &#x1f680;所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 一、前情提要1、什么是关联式容器&#xff1f;2、键值对又是什么&#xff1f; 二、树形结构的关联式容器1、set1.1…

在不受支持的 Mac 上安装 macOS Sequoia (OpenCore Legacy Patcher v2.0.1)

在不受支持的 Mac 上安装 macOS Sequoia (OpenCore Legacy Patcher v2.0.1) Install macOS on unsupported Macs 请访问原文链接&#xff1a;https://sysin.org/blog/install-macos-on-unsupported-mac/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主…

【CoppeliaSim V4.7】The Python interpreter could not handle the wrapper script

[sandboxScript:error] The Python interpreter could not handle the wrapper script (or communication between the launched subprocess and CoppeliaSim could not be established via sockets). Make sure that the Python modules ‘cbor2’ and ‘zmq’ are properly i…

【C++】stack和queue的使用及模拟实现

stack就是栈的意思&#xff0c;这个结构遵循后进先出(LIFO)的原则&#xff0c;可以将栈想象为一个子弹夹&#xff0c;先进去的子弹后出来。 queue就是队列的意思&#xff0c;这个结构遵循先进先出(FIFO)的原则&#xff0c;可以将对列想象成我们排队买饭的场景&#xff0c;先排…

Shopee 大促想爆单如何准备?EasyBoss ERP为你准备了一份攻略!

Shopee下半年第二个大促节点——10.10品牌大促即将来到&#xff0c;根据Shopee的官方的数据&#xff0c;9.9大促当天&#xff0c;Shopee Mall单量增至平日4倍。 老板们&#xff0c;准备好自己的热卖爆款冲击10.10大促了吗&#xff1f; 图源&#xff1a;Shopee 为助力大家迎战大…

大模型速通LLM神书来了《从头开始构建大型语言模型》,尚未发布,GitHub标星22k!!

这本大模型书籍资料已经上传CSDN&#xff0c;朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】 本书介绍 《从零构建大模型》是一本即将于今年10月底发布的书籍&#xff0c;github已经吸引了惊人的21.7k标星&#xff01;作者是威斯康星大学麦迪逊分…

N个utils(类加载-初始化-序列化)

fasterxml.jackson.databind.ObjectMapper(springboot本身就集成了) public class ObjectMapper {// 公共的ObjectMapper对象public static com.fasterxml.jackson.databind.ObjectMapper mapper new com.fasterxml.jackson.databind.ObjectMapper();/*** Description: 将数据…

推荐一款开源的链路监控系统

12.9k star&#xff0c;最强链路监控系统推荐&#xff0c;推荐 用过cat、pinpoint、skywalking等链路监控系统&#xff0c;各有优劣&#xff0c;但用的最多的还是pinpoint&#xff0c;工作6年&#xff0c;其中有4年都在用pinpoint&#xff0c;所以也比较熟悉&#xff0c;之前也…

鸿蒙界面开发——组件(10):单选框Radio复选框checkbox 下拉框select 多条件筛选Filter

单选框Radio 单选框一直会有这个圆圈&#xff0c;在选中和未选中之间切换状态。 Radio通过调用接口来创建&#xff0c;接口调用形式如下&#xff1a; Radio(options: RadioOptions) Radio(options: {value: string, group: string ,indicatorType:RadioIndicatorType,(新增) …

NET 7 AOT 的使用以及+NET 与 Go 互相调用

目录 背景 C# 部分 环境要求 创建一个控制台项目 体验 AOT 编译 C# 调用库函数 减少体积 C# 导出函数 C# 调用 C# 生成的 AOT Golang 部分 安装 GCC Golang 导出函数 .NET C# 和 Golang 互调 C# 调用 Golang Golang 调用 C# 其他 背景 其实&#xff0c;规划这篇文章有一段时间了…

AI产品经理必知的133个专业术语

一、机器学习与数据科学 1、监督学习&#xff08;Supervised Learning&#xff09; 监督学习是机器学习的一种形式&#xff0c;其中模型通过带标签的数据集进行训练。训练数据包括输入特征&#xff08;X&#xff09;和对应的输出标签&#xff08;Y&#xff09;&#xff0c;模…

哪个牌子的麦克风好?选购无线麦克风必看的五大隐藏风险

随着短视频行业的兴起。短视频已经成为我们日常生活的一个重要表达载体&#xff0c;同时无线麦克风也是正式进入到了我们的视野之中&#xff0c;这种麦克风凭借没有线材束缚、兼容性更好、拾音更好的特性&#xff0c;成为了不少短视频创作者必不可少的“搭档之一”&#xff0c;…

uniapp APP自动更新组件

在uniapp中实现APP自动更新功能&#xff0c;主要涉及到客户端在功能不断迭代过程中&#xff0c;需要进行自动更新。uniapp一个详细的实现步骤&#xff0c;包括客户端和服务器端的配置&#xff1a; 服务器端配置 版本信息管理 服务器端需要维护一个数据库或配置文件&#xff…

C语言-动态内存分配讲解

目录 ✨1.什么是动态内存分配 &#x1f495;2.动态内存开辟函数 malloc ✨3.malloc函数的检查&#xff08;两种方法&#xff09; &#x1f495;4.动态内存释放函数 free ✨5.free 函数接收空指针 ✨6.为什么要释放动态内存 &#x1f495;7.动态内存开辟函数calloc &#…

【优选算法之位运算】No.7--- 经典位运算算法

文章目录 前言一、位运算几种模型&#xff1a;1.1 基础的位运算&#xff1a; << >> ~ & | ^1.2 几种模型&#xff1a;1.3 模型练习 二、位运算示例&#xff1a;2.1 判定字符是否唯⼀2.2 丢失的数字2.3 两整数之和2.4 只出现⼀次的数字 II2.5 消失的两个数字 前…

STM32G474使用DMA和SPI1实现自发自收

STM32G474使用DMA搬运数据&#xff0c;实现SPI自发自收&#xff0c;验证SPI收发是否正常。测试时&#xff0c;需要将SPI1_MISO和SPI1_MOSI短接。SPI1外设用作主机&#xff0c;其接口&#xff1a;将SPI1_SCK映射到PA5,SPI1_MISO映射到PA6,SPI1_MOSI映射到PA7,SPI1_NSS映射到PA4。…

基于PHP+MySQL组合开发地方门户分类信息网站源码系统 带完整的安装代码包以及搭建部署教程

系统概述 随着互联网技术的飞速发展&#xff0c;地方门户分类信息网站逐渐成为城市生活不可或缺的一部分。它们涵盖了房产、招聘、二手交易、生活服务等多个领域&#xff0c;为当地居民提供了全方位的信息服务。为了满足这一市场需求&#xff0c;我们开发了这款基于PHPMySQL的…