07 vue3之组件及生命周期

 组件基础

每一个.vue 文件呢都可以充当组件来使用

每一个组件都可以复用

组件的生命周期

简单来说就是一个组件从创建 到 销毁的 过程 成为生命周期

在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的

 

onBeforeMount()

在组件DOM实际渲染安装之前调用。在这一步中,根元素还不存在。

onMounted()

在组件的第一次渲染后调用,该元素现在可用,允许直接DOM访问

onBeforeUpdate()

数据更新时调用,发生在虚拟 DOM 打补丁之前。

onUpdated()

DOM更新后,updated的方法即会调用。

onBeforeUnmount()

在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。

onUnmounted()

卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。

选项式 API    Hook inside setup
beforeCreate    Not needed*
created    Not needed*
beforeMount    onBeforeMount
mounted    onMounted
beforeUpdate    onBeforeUpdate
updated    onUpdated
beforeUnmount    onBeforeUnmount
unmounted    onUnmounted
errorCaptured    onErrorCaptured
renderTracked    onRenderTracked
renderTriggered    onRenderTriggered
activated    onActivated
deactivated    onDeactivated

代码示例

父组件

<template><div ref="div">原始值</div><A v-if="flag"></A><button @click="flag = !flag">创建和销毁</button>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import A from "./components/seven.vue"; //vue3.0中引入组件的方式,无需再注册了引入就可使用let flag = ref<boolean>(true);
</script><style lang="sass" scoped></style>

 子组件A

<template><div>我是组件</div><div ref="div">{{ str }}</div><button @click="change">修改</button>
</template><script setup lang="ts">
import {ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onRenderTracked,onRenderTriggered,getCurrentInstance,
} from "vue";
// vue2中Beforecreate created ,在vue3中是没有的 用steup语法糖代替了
// onBeforeMount创建之前是拿不到dom元素,onMounted创建完成能拿到dom元素
// onBeforeUpdate获取更新之前的dom,onUpdated获取更新之后的dom
let instance = getCurrentInstance(); // H获取VUE实例
console.log(instance);let str = ref<string>("cookie");
let div = ref<HTMLDivElement>(); // 通过ref获取dom元素 ref="div" 一定要与let div这个变量名保持一致
const change = () => {str.value = "被修改了";
};
onBeforeMount(() => {console.log("创建之前------", div.value); // undefined
});
onMounted(() => {console.log("创建完成------", div.value?.innerText); // cookie
});
onBeforeUpdate(() => {console.log("更新之前------", div.value?.innerText); // cookie
});
onUpdated(() => {console.log("更新完成------", div.value?.innerText); // 被修改了
});
onBeforeUnmount(() => {console.log("卸载之前------", div.value?.innerText); // 被修改了
});
onUnmounted(() => {console.log("卸载完成------", div.value?.innerText); // undefined
});
</script><style lang="sass" scoped></style>

 

未完待续: 08 vue3之认识less sass 和scoped-CSDN博客

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

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

相关文章

跑DecoupleSegNets遇到的问题

论文&#xff1a;[ECCV-2020]: Improving Semantic Segmentation via Decoupled Body and Edge Supervision 代码&#xff1a;https://github.com/lxtGH/DecoupleSegNets 不想用 ./scripts/train/train_cityscapes_ResNet50_deeplab.sh&#xff0c;直接改train.py 原来citisca…

常量指针、指针常量及常量指针常量

目录 1. 常量指针&#xff08;Pointer to Constant&#xff09; 2. 指针常量&#xff08;Constant Pointer&#xff09; 3. 常量指针常量&#xff08;Constant Pointer to Constant&#xff09; 常量指针&#xff1a;指针指向的值不能改&#xff0c;但指针本身可以指向其他地…

Java+selenium+chrome+linux/windows实现数据获取

背景&#xff1a;在进行业务数据获取或者自动化测试时&#xff0c;通常会使用模拟chrome方式启动页面&#xff0c;然后获取页面的数据。在本地可以使用windows的chromedriver.exe进行打开chrome页面、点击等操作。在linux 下通常使用无界面无弹窗的方式进行操作。接下来是实现方…

IP网络广播服务平台任意文件上传漏洞

文章目录 免责声明搜索语法漏洞描述漏洞复现修复建议 免责声明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 搜索语法 icon_hash"-568806419"漏洞描述 该系统在upload接口处可上传任…

YOLOv8改进 | 模块缝合 | C2f 融合RFAConv和CBAM注意力机制 【二次融合 小白必备】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

自动化任务的错误处理:编写健壮的自动化脚本,处理Office应用中的错误和异常情况

目录 引言 一、自动化任务概述 二、自动化脚本编写基础 2.1 环境准备 2.2 脚本结构 2.3 示例代码 三、Office应用中的错误和异常情况处理 3.1 文件访问权限问题 3.2 文件格式不兼容 3.3 宏病毒和安全性问题 3.4 控件错误和插件问题 四、异常处理与日志记录 4.1 捕…

FPGA技术赋能云数据中心:提高性能与效率

随着现代科技的迅猛发展和大数据时代的推动&#xff0c;云数据中心已成为众多企业的核心基础设施。然而&#xff0c;伴随数据处理需求的不断增长&#xff0c;传统硬件架构在性能、功耗和灵活性方面面临诸多挑战。为了解决这些问题&#xff0c;FPGA&#xff08;现场可编程门阵列…

通信工程学习:什么是MRF多媒体资源功能、MRFC多媒体资源功能控制、MRFP多媒体资源功能处理

一、MRF多媒体资源功能 MRF&#xff08;Multimedia Resource Function&#xff0c;多媒体资源功能&#xff09;是3G/IMS网络中定义的提供多媒体资源功能的网络实体&#xff0c;它为3G/IMS网络的业务和承载提供媒体能力支持。MRF通过提供丰富的媒体处理功能&#xff0c;如播放声…

严重干扰的验证码识别系统源码分享

严重干扰的验证码识别检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comp…

桥接网络设置多用户lxd容器

文章目录 配置宿主机网络固定内核版本安装 lxd、zfs 及 bridge-utils安装宿主机显卡驱动lxd 初始化创建容器模板安装容器显卡驱动复制容器 配置宿主机网络 进入 /etc/netplan/ 目录有一个 yaml 配置文件&#xff0c;下面的命令需要根据自己的 yaml 文件名称自行修改&#xff1…

ClassLoader中各个字段意思

ClassLoader&#xff08;类加载器&#xff09;是JVM&#xff08;Java虚拟机&#xff09;中一个非常重要的组件&#xff0c;它主要负责将Java类文件&#xff08;.class文件&#xff09;加载到JVM的内存中&#xff0c;并对其进行验证、准备、解析和初始化。ClassLoader中的字段就…

CPU 和 GPU:为什么GPU更适合深度学习?

目录 什么是 CPU &#xff1f; 什么是 GPU &#xff1f; GPU vs CPU 差异性对比分析 GPU 是如何工作的 &#xff1f; GPU 与 CPU 是如何协同工作的 &#xff1f; GPU vs CPU 类型解析 GPU 应用于深度学习 什么是 CPU &#xff1f; CPU&#xff08;中央处理器&#xff09;…

美团面试:Redis锁如何续期?Redis锁超时,任务没完怎么办?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; Redis分布式锁&#xff0c;过期怎么办&#xff1f; 如…

pod被驱逐追溯根因

背景 收到pod报警&#xff0c;看到其状态是error&#xff0c;新的pod又在另外一台机器上起来了。 原因分析 describe pod看到pod被驱逐 Status: Failed Reason: Evicted Message: The node was low on resource: ephemeral-storage. Containe…

VulnHub DC-1-DC-7靶机WP

VulnHub DC系列靶机&#xff1a;https://vulnhub.com/series/dc,199/ # VulnHub DC-1 nmap开路获取信息 Nmap scan report for 192.168.106.133 Host is up (0.00017s latency). Not shown: 997 closed ports PORT STATE SERVICE 22/tcp open ssh 80/tcp open http 1…

用手机剪辑视频素材从哪里找?用手机视频素材库分享

如何找到优质的视频剪辑素材呢&#xff1f;这里有几个提供高质量视频素材的优秀网站&#xff0c;帮助你的视频制作更上一层楼。 蛙学网 蛙学网是视频素材领域的佼佼者&#xff0c;提供了从自然风景到城市生活&#xff0c;再到动物世界的广泛视频素材。蛙学网的素材种类丰富&am…

语音克隆神器GPT-Sovits-V2 Mac版整合包!

语音克隆神器GPT-Sovits-V2 Mac版整合包&#xff01; Mac M1/M2/M3芯片福音&#xff01;语音克隆神器GPT-Sovits-V2整合包来了&#xff01; AI语音克隆黑科技&#xff0c;Mac也能轻松玩转&#xff01; 还在羡慕别人用AI语音克隆技术&#xff1f;还在苦恼Mac配置环境的复杂&am…

Mysql连接不上的问题?

Mysql服务器本地能访问&#xff0c;但是外部连接报错如下&#xff1a;显然我也知道这就是一个权限问题&#xff0c;但是在网上百度的方法要么就是不生效&#xff0c;要么就是执行命令报错&#xff0c;很抓狂&#xff5e;这里提供精准的解决方案&#xff1a;SELECT User, Host F…

Linux的历史,版本,Linux的环境安装、简单学习4个基本的Linux指令、创建普通用户等的介绍

文章目录 前言一、Linux的历史二、版本三、Linux的环境安装1. 腾讯云服务器的申请2. xshell的安装与使用 四、 简单学习4个基本的Linux指令1. ls2. pwd3. mkdir4. cd 五、创建普通用户总结 前言 Linux的历史&#xff0c;版本&#xff0c;Linux的环境安装、简单学习4个基本的Li…

OPENAIGC开发者大赛企业组银奖 | Gambit-AI智能合同审核助手

在第二届拯救者杯OPENAIGC开发者大赛中&#xff0c;涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到&#xff0c;我们特意开设了优秀作品报道专栏&#xff0c;旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者&#xff0c;希望能带给您…