Vue3【十八】Vue3的生命周期

news2024/11/8 17:58:38

Vue3【十八】Vue3的生命周期

Vue3【十八】Vue3的生命周期
生命周期
vue组件实例在创建时要经历一系列的初始化步骤,在此过程中vue会在何时的时机,
调用特定的函数,从而让开发者有机会在特定时段运行自己的代码,
这些特定的函数统称为:生命周期钩子
生命周期整体f分为四个阶段 创建 挂载 更新 销毁,每个阶段两个钩子,一前一后

案例截图

在这里插入图片描述

在这里插入图片描述

目录机构

在这里插入图片描述

代码

person.vue
<template>
    <div class="person">
        <h2>Vue3的生命周期</h2>
        <h4> 求和结果: {{ sum }}</h4>
        <button @click="add">  点击 sum+1 </button>
    </div>
</template>

<script lang="ts" setup namwe="Person">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

// 数据
let sum = ref(0);

// 方法
let add = () => {
    sum.value++;
}

// 生命周期
// vue组件实例在创建时要经历一系列的初始化步骤,在此过程中vue会在何时的时机,调用特定的函数,从而让开发者有机会在特定时段运行自己的代码,这些特定的函数统称为:生命周期钩子
// 生命周期整体氛围四个阶段 创建 挂载 更新 销毁,每个阶段两个钩子,一前一后


// 创建
console.log('子组件创建完成');

// 挂载之前
onBeforeMount(() => {
    console.log('组件挂载之前');
})
// 挂载完毕
onMounted(() => {
    console.log('组件挂载完成');
})
// 更新前
onBeforeUpdate(() => {
    console.log('组件更新前');
})
// 更新完成
onUpdated(()=> {
    console.log('组件更新完成');
})
// 卸载之前
onBeforeUnmount(() => {
    console.log('组件卸载之前');
})
// 卸载完毕
onUnmounted(()=>{
    console.log('组件卸载完成');
})


</script>

<style scoped>
.person {
    background-color: #ff9e4f;
    box-shadow: 0 0 10px;
    border-radius: 30px;
    padding: 30px;
}

button {
    margin: 0 10px;
    padding: 0 5px;
    box-shadow: 0 0 5px;
    ;
}
</style>
app.vue
<template>
    <div class="app">
        <h1>你好世界! 我是App根组件</h1>
        <Person  v-if="isShow" />
    </div>
</template>

<script lang="ts" setup name="App">
import { onMounted, ref } from 'vue';
import Person from './components/Person.vue'

let isShow = ref(true)
setTimeout(() => {
    isShow.value = false
}, 5000)

// 挂载完毕
onMounted(() => {
    console.log('父组件 App组件挂载完毕')
})

</script>

<style scoped>
.app {
    background-color: #4fffbb;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>

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

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

相关文章

字符串循环遍历抵消、队列的应用-649. Dota2 参议院

题目链接及描述 649. Dota2 参议院 - 力扣&#xff08;LeetCode&#xff09; 题目分析 题目描述的意思&#xff1a;对于一个字符串循环执行抵消操作&#xff0c;&#xff08;R的个数为1时可以使后续的一个D失效&#xff0c;D的个数为1时可以使后续的一个R失效&#xff09;【相…

私人云盘(自动云同步)

一、项目简介 模仿小米的云服务&#xff0c;实现一个通过TCP实现的私人云盘&#xff0c;因为能力有限&#xff0c;所以只实现自动云同步这一个功能&#xff0c;具体可以分为三个小功能&#xff0c;即保持云端和终端数据一致、实现文件的上传与下载以及手动同步 二、涉及到的知…

LayerNorm层归一化

1.背景 与 Batch normalization 不同&#xff0c;Layer normalization 是在特征维度上进行标准化的&#xff0c;而不是在数据批次维度上。像 Batch Norm 它的核心是数据批次之间的归一化【强调的是第 i 批次和第 i1 批次的区别&#xff0c;然后BN去缩小他们的的区别】&#xf…

Jacob环境探索(兼容性、管理员、DLL位置、VS环境,COM权限)

概述&#xff1a; 最近在生产开发实践出现了很多问题&#xff0c;经过了一系列排查&#xff0c;特做如下总结 探索成果&#xff1a; 1. jacob.dll的建议位置 首先jacob的官网&#xff0c;以及官方GitHub&#xff0c;你可以从这里找到DLL文件&#xff0c;以及相关资料然后DLL文…

lxml库在爬虫领域的贡献及应用

重头戏lxml库里面的xpath 一段代码给各位开开胃 这段代码首先导入了lxml库中的etree模块&#xff0c;然后定义了一个包含HTML内容的字符串html。接着&#xff0c;我们使用etree.HTML()函数解析这个HTML字符串&#xff0c;得到一个表示整个HTML文档的树形结构。最后&#xff0c;…

WindTerm使用SSH密钥连接阿里云实例,服务器设置SSH密钥登录

安装Windterm 地址https://github.com/kingToolbox/WindTerm/releases 下载完放到文件夹就可以打开 阿里云开启密钥对 打开阿里云ecs控制台 https://ecs.console.aliyun.com/keyPair/region/cn-wulanchabu 网络与安全->密钥对&#xff0c;创建密钥对&#xff0c;创建成…

STM32项目分享:智能蓝牙手环

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板打样焊接图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.c…

改变Layout布局中路由渲染区域页面跳转变全屏

有一个需求需要点击侧边栏跳转页面时变全屏&#xff0c;而不是还在content中

QWidget 属性——windowTitle·windowIcon·qrc

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、windowTitle二、windowIcon三、qrc 一、windowTitle windowTitle 是一个通常用于表示窗口标题…

企业级开源项目,云缓存解决方案:CacheCloud

CacheCloud&#xff1a;简化缓存管理&#xff0c;释放数据潜力- 精选真开源&#xff0c;释放新价值。 概览 CacheCloud是由搜狐视频团队开发的一款开源的Redis缓存云平台&#xff0c;支持Redis多种架构(Standalone、Sentinel、Cluster)高效管理、有效降低大规模redis运维成本&…

深入理解rtmp(一)之开发环境搭建

深入理解rtmp(一)之开发环境搭建 手机直播在15年的时候突然火起来,随着花椒,映客等出现,直播一下就出现在了风口,各个公司针对直播的战斗迅速打响,战斗过程比较短暂,随着许多公司的退出和死去,手机直播行业趋于稳定,直播服务时长也被传统的CDN厂商牢牢占据,后面大家又把精力投…

c++【入门】火柴棒三角形问题

限制 时间限制 : 1 秒 内存限制 : 128 MB 题目 如下图所示&#xff0c;摆1个火柴棒三角形需要3根火柴&#xff0c;那么摆2个火柴棒三角形就需要6根火柴&#xff0c;请问摆n个火柴棒三角形需要多少根火柴&#xff1f; 输入 一个整数n&#xff0c;代表想要摆放的火柴棒三角形…

[大模型]Llama-3-8B-Instruct FastApi 部署调用

环境准备 在 Autodl 平台中租赁一个 3090 等 24G 显存的显卡机器&#xff0c;如下图所示镜像选择 PyTorch-->2.1.0-->3.10(ubuntu22.04)-->12.1。 接下来打开刚刚租用服务器的 JupyterLab&#xff0c;并且打开其中的终端开始环境配置、模型下载和运行演示。 pip 换源…

【AI大模型】Transformers大模型库(九):大模型微调之计算微调参数占比

目录 一、引言 二、计算微调参数占比 2.1 概述 2.2 模型参数结构一览 2.3 微调参数占比计算 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库&#xff0c;为huggingface上数以万计的预训练大模型提供预测、训练等服务。 &#x1f917; Transform…

【Qt】文件操作

文章目录 1 :peach:Qt 文件概述:peach:2 :peach:输入输出设备类:peach:3 :peach:文件读写类:peach:4 :peach:文件和目录信息类:peach: 1 &#x1f351;Qt 文件概述&#x1f351; 文件操作是应⽤程序必不可少的部分。Qt 作为⼀个通⽤开发库&#xff0c;提供了跨平台的⽂件操作能…

使用开源的zip.cpp和unzip.cpp实现压缩包的创建与解压(附源码)

目录 1、使用场景 2、压缩包的创建 3、压缩包的解压 4、CloseZipZ和CloseZipU两接口的区别 5、开源zip.cpp和unzip.cpp文件的下载 VC++常用功能开发汇总(专栏文章列表,欢迎订阅,持续更新...)https://blog.csdn.net/chenlycly/article/details/124272585C++软件异常排…

【机器学习300问】112、什么是特征点检测?

特征点检测是计算机视觉中的一种技术&#xff0c;用于识别图像中具有显著局部特征的点。这项技术在多个领域内扮演着核心角色&#xff0c;包括图像识别、三维重建、运动跟踪和图像匹配等。 一、特征点任务的目的 在计算机视觉&#xff08;CV&#xff09;中&#xff0c;特征点检…

PyCharm QThread 设置断点不起作用

背景&#xff1a; 端午节回来上班第一天&#xff0c;不想干活&#xff0c;领导又再后面看着&#xff0c;突然想起一个有意思的问题&#xff0c;为啥我的程序在子进程QThread的子类里打的断点不好用呢&#xff1f;那就解决一下这个问题吧。 原因&#xff1a; 如果您的解释器上…

PB案例学习笔记-19制作一个图片按钮

写在前面 这是PB案例学习笔记系列文章的第19篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

【C++题解】1121 - “倒”数

问题&#xff1a;1121 - “倒”数 类型&#xff1a;需要找规律的循环 题目描述&#xff1a; 输入一个正整数 N&#xff08;0<N<2147483647&#xff09;&#xff0c;将这个数倒着合成一个新数后输出。 比如&#xff1a; 543 &#xff0c;倒过来是345 &#xff08;请注意…