Vue3---基础8(生命周期)

生命周期

        Vue组件在创建时要经历一系列的初始化步骤,在此过程中Vue会在合适的时机,调用特定的函数,从而让开发者有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子

        

Vue2

        在Vue2中,组件的生命周期分为四个阶段,八个钩子函数

创建

        创建前        beforeCreate        

        创建完        created

挂载

        挂载前        beforeMount

        挂载完        mounted

更新

        更新前        beforeUpdate

        更新完        updated

销毁

        销毁前        beforeDestory

        销毁完        destoryed

Vue3

        在Vue3中,钩子函数有7个,创建只有一个

创建

        创建            setup

挂载

        挂载前        onBeforeMount

        挂载完        onMounted

更新

        更新前        onBeforeUpdate

        更新完        onUpdated

卸载

        卸载前        onBeforeunmount

        卸载完        onUnmounted

<script lang="ts" setup name="text2">import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeunmount,onUnmounted } from 'vue'// 创建console.log('创建');// 挂载前onBeforeMount(()=>{console.log('挂载前');})// 挂载完成onMounted(()=>{console.log('挂载完成');})// 更新前onBeforeUpdate(()=>{console.log('更新前');})// 更新完成onUpdated(()=>{console.log('更新完成');})// 卸载前onBeforeunmount(()=>{console.log('卸载前');})// 卸载完成onUnmounted(()=>{console.log('卸载完成');})</script>

        在Vue3中使用钩子函数需要 import 引入

        子组件的挂载要先于父组件,因为深度优先

        第四个阶段在Vue3内叫卸载,且函数变化

        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816568.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

InnoDB中高度为3的B+树最多可以存多少数据?

参考&#xff1a; &#x1f525;我说MySQL每张表最好不超过2000万数据&#xff0c;面试官让我回去等通知&#xff1f; - 掘金 考虑到磁盘IO是非常高昂的操作&#xff0c;计算机操作系统做了预读的优化&#xff0c;当一次IO时&#xff0c;不光把当前磁盘地址的数据&#xff0c;…

计算机网络常问面试题

一.HTTPS是如何保证安全传输的 https通过使⽤对称加密、⾮对称加密、数字证书等⽅式来保证数据的安全传输。 客户端向服务端发送数据之前&#xff0c;需要先建⽴TCP连接&#xff0c;所以需要先建⽴TCP连接&#xff0c;建⽴完TCP连接后&#xff0c;服务端会先给客户端发送公钥…

CentOS 设置静态 IP 配置

防止 CentOS 服务器的 IP 地址更改&#xff0c;可以设置静态 IP 配置&#xff0c;而不是依赖 DHCP&#xff08;动态主机配置协议&#xff09;分配 IP 地址。 以下是在 CentOS 上配置静态 IP 地址步骤&#xff1a; 1. 编辑网络配置文件 打开配置文件。配置文件通常位于 /etc/s…

您与此网站之间建立的连接不安全

正如标题一样&#xff0c;打开的网站地址栏显示&#xff1a;如果你使用浏览器提示您与此网站之间建立的连接不安全、与此站点的连接不安全、网站非安全连接等类似提示。 是因为网站采取的是http地址协议&#xff0c;这种协议有一种缺点&#xff0c;当您常使用的网站出现上述提示…

Vue项目实战:基于用户身份的动态路由管理

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

【动态规划】【背包问题】

1.确定dp数组含义&#xff0c;初始化 2.确定遍历顺序 3.确定dp公式 ‘’‘’ 0-1背包问题&#xff0c;可以分为二维dp和一维dp 有两种状态&#xff0c;当前物品放还是不放入背包 0-1背包&#xff0c;物品只能放一次&#xff0c;因此一维dp要考虑遍历顺序 ‘’’ class solu…

后端返回树结构

出参结构 Getter Setter public class TreeResponse implements Serializable {// 主键private Long id;// 父级节点private Long parentId;// 层级private Byte layer;// 编码private String docCode;// 名称private String docName;// 子节点private List<TreeResponse&g…

yolov5 获取错误样本

yolov5根据把预测错误的样本找出来,并把预测结果打印出来,输出图片 标注时,标注的结果就显示出来了,红框是预测的结果,其他颜色是标注的结果,可以根据结果对比进行调整标注。 注意:标注时独立的json文件格式 batch_mouse_ok.py """ Usage:$ python pa…

如何安装MacOS的虚拟机?mac安装虚拟机的步骤 虚拟机安装MacOS VMware Fusion和Parallels Desktop19

要在Mac上运行MacOS的虚拟机&#xff0c;常用的方法是使用虚拟化软件如VMware Fusion或Parallels Desktop。 以下是安装MacOS的虚拟机的主要步骤&#xff1a; 1. 检查系统要求&#xff1a;确定您的Mac硬件和操作系统满足安装要求。您需要一台具备足够性能的Mac&#xff0c;并…

223 基于matlab的结构有限元分析

基于matlab的结构有限元分析。包括基于4节点四面体单元的空间块体分析、基于4节点四边形单元的矩形薄板分析、基于3节点三角形单元的矩形薄板分析、三梁平面框架结构的有限元分析、四杆桁架结构的有限元分析、基于8节点六面体单元的空间块体分析。每个程序都要相应的文档说明。…

设计模式之策略模式例题:根据用户等级算积分的接口

问题 问题&#xff1a;写一个根据游戏用户等级来送赠送积分的方法接口&#xff0c;一共有100个等级&#xff0c;每种等级都有一个方法&#xff0c;使用策略模式。 在设计一个根据游戏用户等级来赠送积分的接口时&#xff0c;我们需要考虑几个关键点&#xff1a; 解决 性能&a…

spring-cloud-alibaba微服务Sentinel

Sentinel 官方网站 sentinel-dashboard-1.8.7.jar包下载地址 在window通过命令行启动&#xff08;java -Dserver.port8080 -Dproject.namesentinel-dashboard -jar sentinel-dashboard-1.8.7.jar&#xff09;&#xff0c;可以通过 -Dserver.port修改控制台的端口 使用的版本最好…

CentOS7.9.2009安装配置logstash7.11.1

本文章使用CentOS7.9.2009服务器以root用户安装配置logstash7.11.1软件 1.服务器信息 [root@elasticsearch ~]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) [root@elasticsearch ~]# 2.logstash安装配置 --> 上传logstash7.11.1版本至CentOS7.9.200…

【设计模式】4、prototype 原型模式

四、prototype 原型模式 https://refactoringguru.cn/design-patterns/prototype 如果希望 复制对象, 可使用 “prototype 模式” 如果 “待复制的对象” 是 interface 而不是 class, 或者如果 class 有 private 变量时. 无法知道 "待复制的对象"的细节, 则需要其…

Python 全栈 Web 应用模板:成熟架构,急速开发 | 开源日报 No.223

tiangolo/full-stack-fastapi-template Stars: 15.6k License: MIT full-stack-fastapi-template 是一个现代化的全栈 Web 应用模板。 使用 FastAPI 构建 Python 后端 API。使用 SQLModel 进行 Python SQL 数据库交互&#xff08;ORM&#xff09;。Pydantic 用于数据验证和设…

Linux目录和文件管理

Linux 目录结构 是树形结构&#xff0c;默认是以 根目录 / 为所有文件、目录的起点 目录介绍/root 超级用户(系统管理员)的主目录(特权阶级)/home存放所有用户文件的根目录&#xff0c;是用户主目录的基点&#xff0c;比如用户user的主目录就是/home/user&#xff0c;可以…

ARM的TrustZone技术

ARM的TrustZone技术是一种系统范围的安全解决方案&#xff0c;旨在为高性能计算平台上的各种应用提供保护&#xff0c;如安全支付、数字版权管理、企业服务和基于Web的服务。其核心原理是通过硬件级别的隔离和保护来增强系统的安全性。 工作原理 TrustZone技术通过在ARM架构中…

NODE MCU (ESP8285-ESP8266)用Arduino lDE 2.3.2烧录系统后串口监控不打印问题

问题: Arduino lDE 2.3.2,集合DOIT ESP-Mx DevKit板子,烧录代码后,串口监视器 打印不出来调试数据 分析: Arduino lDE 2.3.2工具提示,不支持调试 板载flash按钮无需按下,即可烧录系统,由于烧录和调试共用串口,所以怀疑是Arduino lDE 2.3.2在烧录时设置了串口的配置…

YOLTV8 — 大尺度图像目标检测框架(欢迎star)

YOLTV8 — 大尺度图像目标检测框架【ABCnutter/YOLTV8: &#x1f680;】 针对大尺度图像&#xff08;如遥感影像、大尺度工业检测图像等&#xff09;&#xff0c;由于设备的限制&#xff0c;无法利用图像直接进行模型训练。将图像裁剪至小尺度进行训练&#xff0c;再将训练结果…

C语言--内存函数

1.memcmp使用和模拟实现 void * memcpy ( void * destination, const void * source, size_t num ); 函数memcpy从 source 的位置开始向后 复制num个 字节的数据到 destination 指向的内存位置。 这个函数在遇到 \0 的时候并 不会停下来 。 如果source和destination有任何…