Vue3笔记——(二)

015 生命周期
组件的生命周期:
【时刻】 【调用特定的函数】
vue2生命周期
创建 beforeCreate、 created
挂载 beforeMounte、mounted
更新 beforeUpdate、updated
销毁 beforeDestroy、destroyed
生命周期、生命周期函数、生命周期钩子
vue3生命周期
创建 setup
挂载 onBeforeMounte、onMounted
更新 onBeforeUpdate、onUpdated
销毁 onBeforeUnmounte、onUnmounted

<template><div><h2>当前求和{{ sum }}</h2><button @click="addFn">点我sum+1</button></div>
</template>
<script setup lang="ts" name="person">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
// 数据
let sum = ref(0);
// 方法
function addFn() {sum.value++;
}
// 创建
console.log("创建");
// 挂载前,调用onBeforeMount中的回调函数
onBeforeMount(() => {console.log("挂载前");
});
onMounted(() => {console.log("挂载完毕");
})
// 更新前
onBeforeUpdate(() => {console.log("更新前");
})
// 更新后
onUpdated(() => {console.log("更新后");
})
// 卸载前
onBeforeUnmount(() => {console.log("卸载前");
})
// 卸载后
onUnmounted(() => {console.log("卸载后");
})
</script>

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

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

相关文章

2024年工作总结

一、2024年个人成长、工作总结 1.博客文章 在这一年的创作中&#xff0c;共发布95篇文章&#xff0c;其中&#xff1a; Scrum敏捷项目管理&#xff1a; Scrum敏捷项目管理 前端技术vue jquery&#xff1a; jQuery&#xff08;一&#xff09;jQuery基本语法 分布式事务&…

Blazor-Blazor呈现概念

静态和交互式呈现概念 在Blazor开发中&#xff0c;Razor 组件具备两种重要的呈现方式&#xff0c;分别是静态呈现和交互式呈现。 静态呈现 也被称为静态渲染&#xff0c;是一种典型的服务器端方案。在这种模式下&#xff0c;组件呈现时&#xff0c;用户与.NET/C# 代码之间缺…

使用 Intersection Observer 实现高效懒加载和滚动监听

在前端开发中&#xff0c;性能优化是提升用户体验的核心之一。随着网页内容的日益增多&#xff0c;如何高效地加载图片、视频等资源&#xff0c;以及如何监听用户的滚动行为&#xff0c;成为了前端开发者需要解决的难题。传统的滚动事件监听往往会带来性能瓶颈&#xff0c;尤其…

【技术洞察】2024科技绘卷:浪潮、突破、未来

涌动与突破 2024年&#xff0c;科技的浪潮汹涌澎湃&#xff0c;人工智能、量子计算、脑机接口等前沿技术如同璀璨星辰&#xff0c;方便了大家的日常生活&#xff0c;也照亮了人类未来的道路。这一年&#xff0c;科技的突破与创新不断刷新着人们对未来的想象。那么回顾2024年的科…

无线通信与人工智能技术与发展年度总结

2024年&#xff0c;无线通信与人工智能技术取得了显著的进步和突破&#xff0c;这些技术的革新不仅推动了行业的数字化转型&#xff0c;还为全球经济的持续发展注入了新的活力。以下是对无线通信与人工智能技术在这一年发展的详细总结。 #### 无线通信技术的飞速演进 无线通信…

Python 之 Excel 表格常用操作

示例文件 test.xlsx 将各个表单拆分成单独的 Excel 文件 import os.pathimport openpyxl import pandasdef handle_excel(file_path):dirname os.path.dirname(file_path)basename os.path.basename(file_path).split(".")[0]wb openpyxl.load_workbook(file_pat…

激活版,快速安装

每天开机都要等待很长时间&#xff0c;玩游戏或看视频时频繁卡顿&#xff0c;甚至偶尔还会莫名其妙地崩溃。这种情况几乎每个人都遇到过&#xff0c;真是让人头疼不已。 别担心&#xff0c;其实有一种方法可以让你的电脑恢复如新&#xff0c;让我们一起看看如何解决这些烦恼吧…

Kimi 1.5解读:国产AI大模型的创新突破与多模态推理能力(内含论文地址)

文章目录 一、Kimi 1.5的核心技术创新&#xff08;一&#xff09;长上下文扩展&#xff08;Long Context Scaling&#xff09;&#xff08;二&#xff09;改进的策略优化&#xff08;Improved Policy Optimization&#xff09;&#xff08;三&#xff09;简化框架&#xff08;S…

[央企大赛 2025] pwn

拿到堆附件&#xff0c;不清楚哪个是密码哪个是pwn&#xff0c;找到两个pwn&#xff0c;一个RSA密码相对简单&#xff08;已知e,d,N,直接用N解出k((ed-1)//phi_N(ed-1)//N^2),然后求pq&#xff0c;而phi_N正好是pq的2次方程&#xff09;。就只复现了两个pwn&#xff0c;感觉还有…

.NET 9.0 的 Blazor Web App 项目、Bootstrap Blazor 组件库、自定义日志 TLog 使用备忘

一、设计目标&#xff1a;通用、容易修改、使用简单&#xff0c;所有代码保存在一个文件中&#xff0c;方便移植到其他项目使用。 注&#xff1a;示例使用 Bootstrap Blazor 组件库和 EF Core 、Sqlite&#xff0c;需要先使用 Nuget包管理器 添加对应的包。 namespace Blazor…

单片机基础模块学习——数码管(二)

一、数码管模块代码 这部分包括将数码管想要显示的字符转换成对应段码的函数&#xff0c;另外还包括数码管显示函数 值得注意的是对于小数点和不显示部分的处理方式 由于小数点没有单独占一位&#xff0c;所以这里用到了两个变量i,j用于跳过小数点导致的占据其他字符显示在数…

uniapp——App 监听下载文件状态,打开文件(三)

5 实现下载文件并打开 这里演示&#xff0c;导出Excel 表格 文章目录 5 实现下载文件并打开DEMO监听下载进度效果图为什么 totalSize 一直为0&#xff1f; 相关Api&#xff1a; downloader DEMO 提示&#xff1a; 请求方式支持&#xff1a;GET、POST&#xff1b;POST 方式需要…

MyBatis进阶

1. 动态SQL 1.1 <if>标签的使用(xml版本) 动态 SQL 是Mybatis的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接。 现在有一个需求.注册分为两种字段&#xff1a;必填字段和⾮必填字段&#xff0c;那如果在添加用户的时候有不确定的字段传⼊&#xff0c;程…

粒子群算法 笔记 数学建模

引入: 如何找到全局最大值&#xff1a;如果只是贪心的话&#xff0c;容易被局部最大解锁定 方法有&#xff1a;盲目搜索&#xff0c;启发式搜索 盲目搜索&#xff1a;枚举法和蒙特卡洛模拟&#xff0c;但是样例太多花费巨量时间 所以启发式算法就来了&#xff0c;通过经验和规…

OpenCV相机标定与3D重建(65)对图像点进行去畸变处理函数undistortPoints()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 从观测到的点坐标计算理想点坐标。 该函数类似于 undistort 和 initUndistortRectifyMap&#xff0c;但它操作的是稀疏点集而不是光栅图像。此外…

AIGC浪潮下,图文内容社区数据指标体系构建探索

在AIGC&#xff08;人工智能生成内容&#xff09;浪潮席卷之下&#xff0c;图文内容社区迎来了新的发展机遇与挑战。为了有效监控和优化业务发展&#xff0c;构建一个科学、全面的数据指标体系显得尤为重要。本文将深入探讨如何在AIGC背景下&#xff0c;为图文内容社区构建一套…

【Unity3D】《跳舞的线》游戏的方块单方向拉伸实现案例

通过网盘分享的文件&#xff1a;CubeMoveMusic.unitypackage 链接: https://pan.baidu.com/s/1Rq-HH4H9qzVNtpQ84WXyUA?pwda7xn 提取码: a7xn 运行游戏点击空格动态创建拉伸的方块&#xff0c;由Speed控制速度&#xff0c;新方向是随机上下左右生成。 using System.Collect…

Android Studio打包APK

1.导出APK安装包 如果是首次打包&#xff0c;Create new 单击蓝色对话框右边文件夹&#x1f4c2;图标 &#xff0c;选择密钥保存路径&#xff0c;然后在下方File name对话框中填写您想要名称&#xff0c;再点击OK回到密钥创建对话框。 在此对话框中填写密码&#xff08;Passwo…

Docker 从零开始掌握容器化技术

Docker 初学者指南&#xff1a;从零开始掌握容器化技术 引言 Docker 是一个强大的工具&#xff0c;可以帮助开发者轻松地创建、部署和运行应用程序。对于初学者来说&#xff0c;Docker 可能看起来有些复杂&#xff0c;但一旦掌握了基本概念和操作&#xff0c;你会发现它非常直…

GSI快速收录服务:让你的网站内容“上架”谷歌

辛苦制作的内容无法被谷歌抓取和展示&#xff0c;导致访客无法找到你的网站&#xff0c;这是会让人丧失信心的事情。GSI快速收录服务就是为了解决这种问题而存在的。无论是新上线的页面&#xff0c;还是长期未被收录的内容&#xff0c;通过我们的技术支持&#xff0c;都能迅速被…