使用 Vue 3 的 watchEffect 和 watch 进行响应式监视

Vue 3 的 Composition API 引入了 <script setup> 语法,这是一种更简洁、更直观的方式来编写组件逻辑。结合 watchEffectwatch,我们可以轻松地监视响应式数据的变化。本文将介绍如何使用 <script setup> 语法结合 watchEffectwatch,并通过一个示例展示它们的用法。


什么是 <script setup> 语法?

<script setup> 是 Vue 3 中的一种语法糖,它允许我们在单文件组件(SFC)中以更简洁的方式编写 Composition API 代码。使用 <script setup> 后,我们无需显式地使用 setup 函数,而是可以直接在 <script setup> 中编写逻辑。


什么是 watchEffect

watchEffect 是 Vue 3 中的一个函数,用于自动跟踪响应式依赖,并在这些依赖发生变化时执行指定的副作用函数。与 watch 不同,watchEffect 不需要显式地指定要监视的依赖,它会自动收集在副作用函数中使用到的响应式数据。


什么是 watch

watch 是 Vue 3 中的另一个函数,用于显式地监视指定的响应式数据,并在这些数据发生变化时执行回调函数。与 watchEffect 不同,watch 需要明确指定要监视的依赖。


示例代码

假设我们有一个组件,需要监视水温和水位的变化,并在水温达到 60 度或水位达到 80 时向服务器发送请求。我们可以使用 watchEffectwatch 来实现这一功能,并提供两个按钮来增加水温和水位。

以下是完整的代码示例:

<template><div><p>当前水温: {{ temp }}°C</p><p>当前水位: {{ height }}cm</p><button @click="increaseTemp">增加温度</button><button @click="increaseHeight">增加水位</button></div>
</template><script lang="ts" setup>
import { ref, watchEffect, watch } from 'vue';// 定义响应式数据
const temp = ref(50); // 初始水温为 50°C
const height = ref(70); // 初始水位为 70cm// 使用 watchEffect 监视数据变化
watchEffect(() => {if (temp.value >= 60 || height.value >= 80) {console.log('watchEffect: 条件满足,给服务器发请求');// 这里可以添加发送请求的逻辑}
});// 使用 watch 监视数据变化
watch([temp, height], ([newTemp, newHeight]) => {if (newTemp >= 60 || newHeight >= 80) {console.log('watch: 条件满足,给服务器发请求');// 这里可以添加发送请求的逻辑}
});// 增加温度的函数
const increaseTemp = () => {temp.value += 10;
};// 增加水位的函数
const increaseHeight = () => {height.value += 10;
};
</script>

代码解析

  1. 定义响应式数据

    • 使用 ref 函数定义了两个响应式数据 tempheight,分别表示水温和水位。
    • 初始值设置为 temp = 50(水温)和 height = 70(水位)。
  2. 使用 watchEffect

    • watchEffect 自动跟踪 tempheight 的变化。
    • temp >= 60height >= 80 时,触发副作用函数,打印日志并模拟发送请求。
  3. 使用 watch

    • watch 显式地监视 tempheight 的变化。
    • tempheight 发生变化时,触发回调函数,打印日志并模拟发送请求。
  4. 增加温度和水位的函数

    • increaseTemp:每次点击按钮,水温增加 10°C。
    • increaseHeight:每次点击按钮,水位增加 10cm。

对比 watchEffectwatch

特性watchEffectwatch
依赖收集自动收集副作用函数中的响应式依赖需要显式指定要监视的依赖
使用场景适合不需要明确指定依赖的场景适合需要明确指定依赖的场景
初始化执行立即执行副作用函数默认不会立即执行,除非设置 { immediate: true }
性能依赖自动收集,可能稍慢依赖明确,性能稍高

总结

通过 <script setup> 语法,我们可以更简洁地编写 Vue 组件的逻辑。watchEffectwatch 是 Vue 3 中用于监视响应式数据变化的强大工具:

  • watchEffect 适合自动跟踪依赖的场景。
  • watch 适合需要显式控制依赖的场景。

在实际开发中,可以根据具体需求选择合适的工具。希望本文能帮助你更好地理解和使用 watchEffectwatch。如果你有任何问题或建议,欢迎在评论区留言讨论!

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

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

相关文章

第一届“启航杯”网络安全挑战赛WP

misc PvzHE 去这个文件夹 有一张图片 QHCTF{300cef31-68d9-4b72-b49d-a7802da481a5} QHCTF For Year 2025 攻防世界有一样的 080714212829302316092230 对应Q 以此类推 QHCTF{FUN} 请找出拍摄地所在位置 柳城 顺丰 forensics win01 这个软件 云沙盒分析一下 md5 ad4…

ThreadLocal概述、解决SimpleDateFormat出现的异常、内存泄漏、弱引用、remove方法

①. ThreadLocal简介 ①. ThreadLocal是什么 ①. ThreadLocal本地线程变量,线程自带的变量副本(实现了每一个线程副本都有一个专属的本地变量,主要解决的就是让每一个线程绑定自己的值,自己用自己的,不跟别人争抢。通过使用get()和set()方法,获取默认值或将其值更改为当前线程…

蓝桥杯模拟算法:多项式输出

P1067 [NOIP2009 普及组] 多项式输出 - 洛谷 | 计算机科学教育新生态 这道题是一道模拟题&#xff0c;我们需要分情况讨论&#xff0c;我们需要做一下分类讨论 #include <iostream> #include <cstdlib> using namespace std;int main() {int n;cin >> n;for…

LLM - 大模型 ScallingLaws 的设计 100B 预训练方案(PLM) 教程(5)

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/145356022 免责声明&#xff1a;本文来源于个人知识与公开资料&#xff0c;仅用于学术交流&#xff0c;欢迎讨论&#xff0c;不支持转载。 Scalin…

深度解析:基于Vue 3的教育管理系统架构设计与优化实践

一、项目架构分析 1. 技术栈全景 项目采用 Vue 3 TypeScript Tailwind CSS 技术组合&#xff0c;体现了现代前端开发的三大趋势&#xff1a; 响应式编程&#xff1a;通过Vue 3的Composition API实现细粒度响应 类型安全&#xff1a;约60%的组件采用TypeScript编写 原子化…

计算机组成原理(2)王道学习笔记

数据的表示和运算 提问&#xff1a;1.数据如何在计算机中表示&#xff1f; 2.运算器如何实现数据的算术、逻辑运算&#xff1f; 十进制计数法 古印度人发明了阿拉伯数字&#xff1a;0&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4&#xff0c;5&#xff0c;6&#…

(详细)Springboot 整合动态多数据源 这里有mysql(分为master 和 slave) 和oracle,根据不同路径适配不同数据源

文章目录 Springboot 整合多动态数据源 这里有mysql&#xff08;分为master 和 slave&#xff09; 和oracle1. 引入相关的依赖2. 创建相关配置文件3. 在相关目录下进行编码&#xff0c;不同路径会使用不同数据源 Springboot 整合多动态数据源 这里有mysql&#xff08;分为maste…

AI如何帮助解决生活中的琐碎难题?

引言&#xff1a;AI已经融入我们的日常生活 你有没有遇到过这样的情况——早上匆忙出门却忘了带钥匙&#xff0c;到了公司才想起昨天的会议资料没有打印&#xff0c;或者下班回家还在纠结晚饭吃什么&#xff1f;这些看似微不足道的小事&#xff0c;往往让人疲惫不堪。而如今&a…

一分钟搭建promehteus+grafana+alertmanager监控平台

为什么要自己搭建一个监控平台 平时进行后端开发&#xff0c;特别是微服务的后端可开发&#xff0c;一定少不了对接监控平台&#xff0c;但是平时进行一些小功能的测试又没有必要每次都手动安装那么多软件进行一个小功能的测试&#xff0c;这里我使用docker-compose搭建了一个…

深入MapReduce——计算模型设计

引入 通过引入篇&#xff0c;我们可以总结&#xff0c;MapReduce针对海量数据计算核心痛点的解法如下&#xff1a; 统一编程模型&#xff0c;降低用户使用门槛分而治之&#xff0c;利用了并行处理提高计算效率移动计算&#xff0c;减少硬件瓶颈的限制 优秀的设计&#xff0c…

前端【10】jQuery DOM 操作

目录 jquery捕获查取 获得内容 - text()、html() 以及 val() 获取属性 - attr() ​编辑 jQuery 修改/设置内容和属性 设置内容 - text()、html() 以及 val() 设置属性 - attr() jQuery添加元素 jQuery - 删除元素 前端【9】初识jQuery&#xff1a;让JavaScript变得更简…

进程控制的学习

目录 1.进程创建 1.1 fork函数 1.2 fork函数返回值 1.3 写时拷贝 1.4 fork 常规用法 1.5 fork 调用失败的原因 2. 进程终止 2.1 进程退出场景 2.2 进程常见退出方法 2.2.1 从main 返回 2.2.2 echo $&#xff1f; 查看进程退出码 2.2.2.1 我们如何得到退出码代表的含…

数据结构与算法分析:专题内容——人工智能中的寻路7之AlphaBeta(代码详解)

一、算法描述 在考虑到对手的可能走法之后&#xff0c;Minimax算法能够较为恰当地找出玩家的最优走法。但是&#xff0c;在生成博弈树时&#xff0c;这个信息却没有使用&#xff01;我们看看早先介绍的BoardEvaluation评分函数。回忆一下下图Minimax的探测&#xff1a; 这是从…

12、本地缓存分布式缓存(未完待续)

1、哪些数据适合放入缓存&#xff1f; 即时性、数据一致性要求不高的访问量大且更新频率不高的数据&#xff08;读多&#xff0c;写少&#xff09; 2、本地缓存 1、本地缓存&#xff0c;如果是单体项目&#xff0c;部署到一台服务器上&#xff0c;就不存在什么问题&#xff…

Linux——网络基础(1)

文章目录 目录 文章目录 前言 一、文件传输协议 应用层 传输层 网络层 数据链路层 数据接收与解封装 主机与网卡 数据传输过程示意 二、IP和MAC地址 定义与性质 地址格式 分配方式 作用范围 可见性与可获取性 生活例子 定义 用途 特点 联系 四、TCP和UDP协…

免费GPU算力,不花钱部署DeepSeek-R1

在人工智能和大模型技术飞速发展的今天&#xff0c;越来越多的开发者和研究者希望能够亲自体验和微调大模型&#xff0c;以便更好地理解和应用这些先进的技术。然而&#xff0c;高昂的GPU算力成本往往成为了阻碍大家探索的瓶颈。幸运的是&#xff0c;腾讯云Cloud Studio提供了免…

阿里前端开发规范

文章目录 1. 为什么前端写代码要规范&#xff1f;一、代码规范的必要性二、 规范带来的好处 2. 资源一、推荐 1. 为什么前端写代码要规范&#xff1f; 一、代码规范的必要性 可维护性 统一的代码风格便于理解和修改减少代码维护成本降低项目交接难度 团队协作 提高团队开发效…

Linux 小火车

1.添加epel软件源 2.安装sl 3. 安装完成后输入&#xff1a; sl

高效流式大语言模型(StreamingLLM)——基于“注意力汇聚点”的突破性研究

论文地址&#xff1a;https://arxiv.org/pdf/2309.17453 github地址&#xff1a;https://github.com/mit-han-lab/streaming-llm 1. 研究背景与挑战 随着大语言模型&#xff08;LLMs&#xff09;在对话系统、文档摘要、代码补全和问答等领域的广泛应用&#xff0c;如何高效且准…

STM32-时钟树

STM32-时钟树 时钟 时钟