VUE3:组合式API生命周期

1、onMounted
注册一个回调函数,在组件挂载完成后执行。
组件在以下情况下被视为已挂载:
– 1. 其所有同步子组件都已经被挂载。
– 2. 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。

<script setup>
import { ref, onMounted } from 'vue'
const el = ref(null);
onMounted(() => {console.log(el.value);
})
</script>

2、onUpdated
注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用。
父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的,因为多个状态变更可以在同一个渲染周期中批量执行(考虑到性能因素)。如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。
warning: 不要在 updated 钩子中更改组件的状态,这可能会导致无限的更新循环。

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {// 文本内容应该与当前的 `count.value` 一致console.log(document.getElementById('count').textContent)
})
</script>

3、onUnmounted
注册一个回调函数,在组件实例被卸载之后调用。
一个组件在以下情况下被视为已卸载:
– 1.其所有子组件都已经被卸载。
– 2.所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。
可以在这个钩子中手动清理一些副作用,例如计时器、DOM 事件监听器或者与服务器的连接。

<script setup>
import { onMounted, onUnmounted } from 'vue'
let intervalId
onMounted(() => {intervalId = setInterval(() => {// ...})
})
onUnmounted(() => clearInterval(intervalId))
</script>

4、onBeforeMount
注册一个钩子,在组件被挂载之前被调用。
当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
5、onBeforeUpdate
注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的
6、onBeforeUnmount
注册一个钩子,在组件实例被卸载之前调用。
当这个钩子被调用时,组件实例依然还保有全部的功能。
7. onActivated()​
注册一个回调函数,若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。
8、onDeactivated()​
注册一个回调函数,若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用
9、onErrorCaptured
注册一个钩子,在捕获了后代组件传递的错误时调用
10、onRenderTracked
注册一个调试钩子,当组件渲染过程中追踪到响应式依赖时调用。
这个钩子仅在开发模式下可用
11、onRenderTriggered
注册一个调试钩子,当响应式依赖的变更触发了组件渲染时调用。
这个钩子仅在开发模式下可用
12、onServerPrefetch
注册一个异步函数,在组件实例在服务器上被渲染之前调用
这个钩子仅会在服务端渲染中执行,可以用于执行一些仅存在于服务端的数据抓取过程。

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

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

相关文章

已定式,未定式【高数笔记】

【已定式】 将x-->? 的过程代入到lim中&#xff0c;如果得出的结果可以判断出&#xff0c;lim是有极限的&#xff0c;则为已定式 [举例] lim(1/x)&#xff0c;x--> 无穷 &#xff0c;即&#xff0c;1/ 无穷 0 &#xff0c;所以为已定式 【未定式】 将x-->? 的过程代…

docker 搭建 Seafile 集成 onlyoffice

docker-compose一键部署yaml文件 version: "3"services:db:image: mariadb:10.11container_name: seafile-mysqlenvironment:- MYSQL_ROOT_PASSWORDdb_dev # Requested, set the roots password of MySQL service.- MYSQL_LOG_CONSOLEtruevolumes:- /share/ZFS18_D…

Rust - 变量

不管学什么语言好像都得从变量开始&#xff0c;不过只需要懂得大概就可以了。 但在Rust里不先把变量研究明白后面根本无法进行… 变量绑定 变量赋值❌ 变量绑定✔️ Rust中没有“赋值”一说&#xff0c;而是称为绑定。 int a 3; //C中的变量赋值 a 3; //python中的…

智慧工地可视化综合管理云平台 PC+APP

目录 一、智慧工地可视化数据大屏功能一览 1.首页 2.视频监控 3.机械设备 4.环境监测 5.安全管理 6.质量管理 7.劳务分析 8.进度管理 9.报警统计 二、项目人员管理 1.信息管理 2.信息采集 3.证件管理 危大工程管理 一、智慧工地可视化数据大屏功能一览 包括&am…

transformer_多头注意力机制代码笔记

transformer_多头注意力机制代码笔记 以GPT-2中多头注意力机制代码为例 class CausalSelfAttention(nn.Module):"""因果掩码多头自注意力机制A vanilla multi-head masked self-attention layer with a projection at the end.It is possible to use torch.nn…

【C语言】const修饰指针的不同作用

目录 const修饰变量 const修饰指针变量 ①不用const修饰 ②const放在*的左边 ③const放在*的右边 ④*的左右两边都有const 结论 const修饰变量 变量是可以修改的&#xff0c;如果把变量的地址交给⼀个指针变量&#xff0c;通过指针变量的也可以修改这个变量。 但…

电脑文件打不开是什么原因?常见原因有这9点

在日常生活和工作中&#xff0c;我们经常会使用电脑来处理文件。然而&#xff0c;有时候我们会遇到电脑文件打不开的情况&#xff0c;这给我们的工作和生活带来了很大的不便。本文将为大家介绍电脑文件打不开的原因&#xff0c;帮助大家更好地应对这一问题。 原因1、文件格式问…

交易策略开发:如何揣摩投资心理,研究交易策略

文章目录 揣摩其他投资者的心理&#xff0c;首先要知道他们学习了什么投资知识。永远记住策略一定是弱于机制的。每种交易技术是如何做交易的&#xff0c;各位可以对号入座**马丁网格类均线&#xff0c;MACD等指标类价格行为类缠论类对冲套利类基本面类订单流资金流秘籍类 揣摩…

论文解读:DeepBDC小样本图像分类

Joint Distribution Matters: Deep Brownian Distance Covariance for Few-Shot Classification 摘要 由于每个新任务只给出很少的训练样例&#xff0c;所以few -shot分类是一个具有挑战性的问题。解决这一挑战的有效研究路线之一是专注于学习由查询图像和某些类别的少数支持…

shell脚本自动备份数据库表

今日目标&#xff1a;shell脚本自动备份数据库中的表并记录执行日志和mysql输出日志 编写思路&#xff1a; &#xff08;1&#xff09;shell脚本运行mysql命令 &#xff08;2&#xff09;脚本输出记录到日志中 &#xff08;3&#xff09;定时任务自动执行shell脚本 1、she…

【Tomcat与网络9】提高Tomcat启动速度的八大措施

本文我们来看一下如何对Tomcat进行调优&#xff0c;我们对于Tomcat的调优主要集中在三个方面&#xff1a;提高启动速度、提高系统稳定性和提高并发能力&#xff0c;后两者很多时候是相辅相成的&#xff0c;我们放在一起看。 Tomcat现在一般都嵌入在SpringBoot里&#xff0c;因…

Linux 驱动开发基础知识——总线设备驱动模型(八)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…

动网格-尺寸函数耦合运动(五)

尺寸函数 **尺寸函数(Size Function)**通常和局部体网格重构结合使用&#xff0c;尺寸函数用于控制重构过程中的网格分布。简单地说&#xff0c;尺寸函数的功能就是在运动边界处约束网格&#xff0c;使其维持在一个较小的尺度&#xff0c;在远离运动边界处&#xff0c;逐步将其…

Windows存储空间不足局域网文件共享 Dism备份系统空间不足

问题情景 在日常使用中难免遇到Windows的空间不足的情况&#xff0c;常用办法是清理垃圾释放空间&#xff0c;部分场景例如我们需要使用Dism备份完整系统&#xff0c;所以需要非常大的存储空间不够&#xff0c;如果空间不够什么才是最有效的方案呢&#xff1f; 我们假设身边没有…

如何使用docker部署Swagger Editor并实现无公网ip远程协作编辑文档

文章目录 Swagger Editor本地接口文档公网远程访问1. 部署Swagger Editor2. Linux安装Cpolar3. 配置Swagger Editor公网地址4. 远程访问Swagger Editor5. 固定Swagger Editor公网地址 Swagger Editor本地接口文档公网远程访问 Swagger Editor是一个用于编写OpenAPI规范的开源编…

【方案】TSINGSEE青犀智能分析网关V4+EasyCVR智慧服务区一体化监控平台

随着年关将近&#xff0c;春运大潮已然开启&#xff0c;届时又伴随着大雨暴雪天气&#xff0c;高速路况的新闻层出不穷。由于长期驾车且高速拥堵严重&#xff0c;不少人就聚集在服务区休息&#xff0c;导致服务区流量爆满&#xff0c;空前的拥堵极易导致服务区瘫痪。如何利用智…

计算机毕业设计 | springboot 多功能商城 购物网站(附源码)

1&#xff0c; 概述 国家大力推进信息化建设的大背景下&#xff0c;城市网络基础设施和信息化应用水平得到了极大的提高和提高。特别是在经济发达的沿海地区&#xff0c;商业和服务业也比较发达&#xff0c;公众接受新事物的能力和消费水平也比较高。开展商贸流通产业的信息化…

OpenHarmony—编辑器使用技巧

DevEco Studio支持使用多种语言进行应用/服务的开发&#xff0c;包括ArkTS、JS和C/C。在编写应用/服务阶段&#xff0c;可以通过掌握代码编写的各种常用技巧&#xff0c;来提升编码效率。 代码高亮 支持对代码关键字、运算符、字符串、类、标识符、注释等进行高亮显示&#x…

少儿编程教育市场分析:行业规模有望在2025年达到约500亿元

少儿编程教育是通过编程游戏启蒙、可视化图形编程等课程&#xff0c;培养学生的计算思维和创新解难能力的课程。与成人的编程不同&#xff0c;少儿编程教育并非高等教育那样学习如何写代码、编制应用程序&#xff0c;而是通过编程游戏启蒙、可视化图形编程等课程&#xff0c;培…

C语言——标准输入函数(scanf、getchar和gets)

目录 1. 标准输入输出头文件2. scanf2.1 scanf2.1.1 函数申明2.1.2 基本用法2.1.3 返回值2.1.4 占位符2.1.5 赋值忽略符 3. getchar3.1 函数申明3.2 基本用法 4. gets4.1 函数申明4.2 基本用法 1. 标准输入输出头文件 #include <stdio.h>在使用标准输入输出函数的时候都…