Vue 3中常用的生命周期钩子和监听器的详细分析

目录

  • 前言
  • 1. onMounted
  • 2. watch
  • 3. computed
  • 4. 其他

前言

分析常用的一些生命周期钩子和监听器可以帮助我们在组件中处理数据加载、状态变化和响应式更新

1. onMounted

生命周期钩子,在组件挂载后执行。它适合用于初始化数据加载或执行一次性的操作

<template><div><p>当前用户ID: {{ userId }}</p><button @click="fetchUserData">加载用户数据</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import UserDataApi from 'path-to-your-api'; // 假设这是你的数据接口const userId = ref(null);
const userData = ref(null);onMounted(async () => {// 初始化加载数据await fetchUserData();
});const fetchUserData = async () => {const response = await UserDataApi.getUserData();userId.value = response.userId;userData.value = response.userData;
};
</script>

2. watch

监听指定的响应式数据,并在数据变化时执行回调函数

有两种形式:基础的 watch 和 watchEffect

<template><div><p>当前计数: {{ count }}</p><button @click="increment">增加计数</button></div>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`计数从 ${oldValue} 变为 ${newValue}`);
});const increment = () => {count.value++;
};
</script>

watchEffect 在其依赖变化时立即执行传入的回调函数

<template><div><p>当前时间: {{ currentTime }}</p></div>
</template><script setup>
import { ref, watchEffect } from 'vue';const currentTime = ref(new Date());watchEffect(() => {console.log('更新当前时间');currentTime.value = new Date();
});// 模拟定时更新时间
setInterval(() => {currentTime.value = new Date();
}, 1000);
</script>

3. computed

computed: 计算属性,基于响应式数据派生出新的数据,并自动缓存结果

<template><div><p>原始数值: {{ originalValue }}</p><p>加倍后的值: {{ doubledValue }}</p><button @click="increment">增加数值</button></div>
</template><script setup>
import { ref, computed } from 'vue';const originalValue = ref(5);const doubledValue = computed(() => originalValue.value * 2);const increment = () => {originalValue.value++;
};
</script>

4. 其他

reactive: 创建一个完全响应式的对象或数组

<template><div><p>当前用户: {{ user.name }}</p><button @click="changeUserName">修改用户名</button></div>
</template><script setup>
import { reactive } from 'vue';const user = reactive({name: 'John Doe',age: 30
});const changeUserName = () => {user.name = 'Jane Smith';
};
</script>

ref: 创建一个响应式的引用,通常用于包装基本类型值

<template><div><p>当前计数: {{ count.value }}</p><button @click="increment">增加计数</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0);const increment = () => {count.value++;
};
</script>

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

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

相关文章

简单一阶滤波器设计:matlab和C实现

一、简单一阶滤波器的模型 二、示例 得: y(n)-0.9y(n-1)=x(n)+0.05x(n-1),即:y(n)=0.9y(n-1)+x(n)+0.05x(n-1) 已知:,并且有: A. 假设输入序列有N=100个点 B. 系统初始状态为0,即y(-1)=0 C. 输入序列是因果序列,

分析AI是在帮助开发者还是取代他们

AI在软件开发中起到了辅助作用&#xff0c;帮助开发者提高生产效率和质量。它可以通过代码生成、错误检测和自动化测试等功能&#xff0c;加速开发流程&#xff0c;减少人为错误并改善软件质量。AI工具可以解放开发者的时间和精力&#xff0c;让他们可以更专注于解决复杂问题和…

【OpenRecall】超越 Windows Recall,OpenRecall 为你的隐私和自由而战

引言 随着 Windows 11 的 Recall 功能推出&#xff0c;我们看到了数字记忆回顾的全新可能性。然而&#xff0c;这项功能受限于特定的硬件——Copilot 认证的 Windows 硬件&#xff0c;并且仅在 Windows 平台上可用。对于追求隐私和硬件灵活性的用户来说&#xff0c;这无疑是个…

长按加速- 解决react - setInterval下无法更新问题

最开始直接setInterval里&#xff0c;useState硬写&#xff0c;发现更新不&#xff0c;固定值 换let&#xff0c;发现dom更新不了 正确做法是用ref 并且pc端可以长按的&#xff0c;只是要用onTouchStart&#xff0c;不要用onMouseDown onTouchStart{handleMouseDown} onTou…

在设计电气系统时,电气工程师需要考虑哪些关键因素?

在设计电气系统时&#xff0c;电气工程师需要考虑多个关键因素&#xff0c;以确保系统的安全性、可靠性、效率和经济性。我收集归类了一份plc学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向编程教学、问题视频讲解、毕设800套和语言…

SEO优化文章写作技巧:如何快速写出高排名高质量内容

不知道有多少人跟我一样&#xff0c;并没有接受过专业的seo优化培训&#xff0c;所学seo优化技巧全部都是通过百度查阅文章所得。 在搜索的有关seo优化相关内容里面&#xff0c;基本上都说到&#xff0c;原创优质内容、优质外链、优质友情链接、优质的内链这几个方面&#xff…

如何查看极狐GitLab Helm Chart?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

word 设置多级混合标题自动更新

目录预览 一、问题描述二、原因分析三、解决方案四、参考链接 一、问题描述 有没有体会过多级标题&#xff0c;怎么设置都不听使唤的情况&#xff1f; 我想要的格式是&#xff1a; 二、原因分析 多级标题中发现&#xff0c;输入编号格式这里有个数字没有底纹,是了&#xff0…

系统架构设计师教程 第3章 信息系统基础知识-3.1 信息系统概述

系统架构设计师教程 第3章 信息系统基础知识-3.1 信息系统概述 3.1.1 信息系统的定义3.1.1.1 信息系统3.1.1.2 信息化3.1.2 信息系统的发展3.1.2.1 初始阶段3.1.2.2 传播阶段3.1.2.3 控制阶段3.1.2.4 集成阶段3.1.2.5 数据管理阶段3.1.2.6 成熟阶段3.1.3 信息系统的分类3.…

Redis-基础概念

目录 概念 Redis是什么 Redis 和 MySQL 的区别&#xff1f; Redis单线程有什么极端场景的瓶颈 Redis为什么快? 为什么Redis是单线程? Redis是单线程还是多线程 Redis为什么选择单线程做核心处理 Redis6.0之后引入了多线程&#xff0c;你知道为什么吗? 瓶颈是内存和I…

C#进阶-基于.NET Framework 4.x框架实现ASP.NET WebForms项目IP拦截器

在这篇文章中&#xff0c;我们将探讨如何在 ASP.NET WebForms 中实现IP拦截器&#xff0c;以便在 ASMX Web 服务方法 和 HTTP 请求 中根据IP地址进行访问控制。我们将使用自定义的 SoapExtension 和 IHttpModule 来实现这一功能&#xff0c;并根据常用的两种文本传输协议&#…

Qunar容器集群监控系统架构实践

一、概述 在云原生的体系下&#xff0c;面对高弹性、拆分微服务以及应用动态生命周期等特点&#xff0c;传统监控体系如 cacti 、nagios 、Zabbix 等已经逐渐丧失了优势&#xff0c;难以适用和支撑&#xff0c;对应的新一代云原生监控体系应运而生&#xff0c;Prometheus 为核…

2663. 字典序最小的美丽字符串

2663. 字典序最小的美丽字符串 题目链接&#xff1a;2663. 字典序最小的美丽字符串 代码如下&#xff1a; //贪心算法 //参考链接:https://leetcode.cn/problems/lexicographically-smallest-beautiful-string/solutions/2251229/tan-xin-pythonjavacgo-by-endlesscheng-yix5…

CSS 导航栏:设计、定制与优化

CSS 导航栏:设计、定制与优化 CSS(层叠样式表)是网页设计中不可或缺的一部分,它允许开发者通过定义样式来控制网页的布局和外观。在网页设计中,导航栏是一个关键元素,它帮助用户浏览网站并找到他们感兴趣的内容。本文将详细介绍如何使用 CSS 设计、定制和优化导航栏,以…

qt 鼠标接近某线时,形状变化举例

1.qt 鼠标接近某线时&#xff0c;形状变化举例 在Qt中&#xff0c;要实现鼠标接近某条线时形状发生变化的效果&#xff0c;你需要利用QWidget的enterEvent和leaveEvent&#xff0c;或者更通用的mouseMoveEvent来检测鼠标的位置&#xff0c;并相应地改变鼠标的光标形状。 以下…

大模型“重构”教育:解构学习奥秘,推动教育普惠

大模型“重构”千行百业系列选题 生成式人工智能的热潮&#xff0c;为AI领域的发展注入新的活力&#xff0c;而“赋能千行百业”已经成为人们普遍对于人工智能和大模型的全新理解。 人工智能和大模型技术的迅猛发展正在以前所未有的速度深刻改变着各个行业。正如专家所预测&a…

搜维尔科技:通过 Xsens MVN Link 套装测试动作捕捉动画,由虚幻引擎5渲染

通过Xsens MVN Link套装测试动作捕捉动画&#xff0c;由虚幻引擎5渲染 搜维尔科技&#xff1a;通过 Xsens MVN Link 套装测试动作捕捉动画&#xff0c;由虚幻引擎5渲染

【Apache POI】Java解析Excel文件并处理合并单元格-粘贴即用

同为牛马&#xff0c;点个赞吧&#xff01; 一、Excel文件样例 二、工具类源码 import org.apache.poi.ss.usermodel.*; import org.apache.poi.ss.util.CellRangeAddress; import org.apache.poi.xssf.usermodel.XSSFWorkbookFactory; import org.springframework.web.multip…

957 Div3 E. Novice‘s Mistake

原题链接&#xff1a;Problem - E - Codeforces 题意&#xff1a;给定n&#xff0c;要求输出求出符合条件的a和b,要求将n转化为字符串&#xff0c;然后a个n相加&#xff0c;例如a3&#xff0c;n32&#xff0c;那么就是323232&#xff0c;然后删除后面的b个字符&#xff0c;如果…

windows实现自动化按键

1.选择目标窗口 获取窗口句柄 void KeyPresser::selectWindow() {SetWinEventHook(EVENT_SYSTEM_FOREGROUND, EVENT_SYSTEM_FOREGROUND, NULL, WinEventProc, 0, 0, WINEVENT_OUTOFCONTEXT);selectedWindowLabel->setText("请点击目标窗口..."); }void CALLBACK …