当前位置: 首页 > news >正文

使用 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。如果你有任何问题或建议,欢迎在评论区留言讨论!

相关文章:

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

Vue 3 的 Composition API 引入了 <script setup> 语法&#xff0c;这是一种更简洁、更直观的方式来编写组件逻辑。结合 watchEffect 和 watch&#xff0c;我们可以轻松地监视响应式数据的变化。本文将介绍如何使用 <script setup> 语法结合 watchEffect 和 watch&…...

Vue.js 高级组件开发

Vue.js 高级组件开发&#xff1a;构建一个智能动态表单生成器 ——从可复用架构到性能优化的全链路实践 引言&#xff1a;为什么需要高级组件&#xff1f; 在现代前端开发中&#xff0c;组件不仅是UI的封装&#xff0c;更是业务逻辑的载体。一个“高级”Vue组件应当具备&…...

React应用深度优化与调试实战指南

一、渲染性能优化进阶 1.1 精细化渲染控制 typescript 复制 // components/HeavyComponent.tsx import React, { memo, useMemo } from react;interface Item {id: string;complexData: {// 复杂嵌套结构}; }const HeavyComponent memo(({ items }: { items: Item[] }) &g…...

Linux 内核学习(4) --- devfreq 动态调频框架

目录 Linux devfreq 简介核心数据结构devfreq_dev_profile 结构体devfreq_governor 结构体devfreq 结构体 工作流程devFreq framework 初始化governor 初始化devfreq Device 注册动态变频的实现device_unregister 流程 用户空间节点参考文章 Linux devfreq 简介 现在的 Soc 由…...

Spring Boot 无缝集成SpringAI的函数调用模块

这是一个 完整的 Spring AI 函数调用实例&#xff0c;涵盖从函数定义、注册到实际调用的全流程&#xff0c;以「天气查询」功能为例&#xff0c;结合代码详细说明&#xff1a; 1. 环境准备 1.1 添加依赖 <!-- Spring AI OpenAI --> <dependency><groupId>o…...

Ansible自动化运维实战--yaml的使用和配置(7/8)

文章目录 一、YAML 基本语法1.1. 缩进1.2. 注释1.3. 列表1.4. 字典 二、Ansible 中 YAML 的应用2.1. Ansible 剧本&#xff08;Playbooks&#xff09;2.2. 变量定义2.3. 角色&#xff08;Roles&#xff09;2.4. Inventory 文件2.5. 数据类型2.6. 引用变量 在 Ansible 里&#x…...

kamailio-5.8.4-centos9编译

安装必要的依赖包 在开始编译之前&#xff0c;你需要安装编译 Kamailio 所需的一些基础依赖包&#xff1a; dnf install -y make gcc gcc-c flex bison libxml2-devel openssl-devel sqlite-devel mysql-devel pcre-devel libcurl-devel下载并解压 Kamailio 源码包 假设你已经…...

单例模式 - 单例模式的实现与应用

引言 单例模式&#xff08;Singleton Pattern&#xff09;是设计模式中最简单且最常用的模式之一。它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。单例模式常用于需要全局唯一对象的场景&#xff0c;如配置管理、日志记录、线程池等。 本文将详细介…...

hadoop==docker desktop搭建hadoop

hdfs map readuce yarn https://medium.com/guillermovc/setting-up-hadoop-with-docker-and-using-mapreduce-framework-c1cd125d4f7b 清理资源 docker-compose down docker system prune -f...

zookeeper的介绍和简单使用

1 zookerper介绍 zookeeper是一个开源的分布式协调服务&#xff0c;由Apache软件基金会提供&#xff0c;主要用于解决分布式应用中的数据管理、状态同步和集群协调等问题。通过提供一个高性能、高可用的协调服务&#xff0c;帮助构建可靠的分布式系统。 Zookeeper的特点和功能…...

DiffuEraser: 一种基于扩散模型的视频修复技术

视频修复算法结合了基于流的像素传播与基于Transformer的生成方法&#xff0c;利用光流信息和相邻帧的信息来恢复纹理和对象&#xff0c;同时通过视觉Transformer完成被遮挡区域的修复。然而&#xff0c;这些方法在处理大范围遮挡时常常会遇到模糊和时序不一致的问题&#xff0…...

CentOS/Linux Python 2.7 离线安装 Requests 库解决离线安装问题。

root@mwcollector1 externalscripts]# cat /etc/os-release NAME=“Kylin Linux Advanced Server” VERSION=“V10 (Sword)” ID=“kylin” VERSION_ID=“V10” PRETTY_NAME=“Kylin Linux Advanced Server V10 (Sword)” ANSI_COLOR=“0;31” 这是我系统的版本,由于是公司内网…...

World of Warcraft [CLASSIC] Jewelcrafting Gemstone 2

World of Warcraft [CLASSIC] Jewelcrafting & Gemstone 2 珠宝加工与常用宝石列表&#xff08;紫色史诗级&#xff09;&#xff1a; World of Warcraft [CLASSIC] Jewelcrafting & Gemstone_wlk宝石属性一览表-CSDN博客...

AI刷题-最小化团建熟悉程度和

目录 问题描述 输入格式 输出格式 解题思路&#xff1a; 状态表示 状态转移 动态规划数组 预处理 实现&#xff1a; 1.初始化&#xff1a; 2.动态规划部分&#xff1a; &#xff08;1&#xff09;对于已分组状态的&#xff0c;跳过&#xff1a; &#xff08;2&…...

一文详解Filter类源码和应用

背景 在日常开发中&#xff0c;经常会有需要统一对请求做一些处理&#xff0c;常见的比如记录日志、权限安全控制、响应处理等。此时&#xff0c;ServletApi中的Filter类&#xff0c;就可以很方便的实现上述效果。 Filter类 是一个接口&#xff0c;属于 Java Servlet API 的一部…...

应用层协议 HTTP 讲解实战:从0实现HTTP 服务器

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Linux 目录 一&#xff1a;&#x1f525; HTTP 协议 &#x1f98b; 认识 URL&#x1f98b; urlencode 和 urldecode 二&#xff1a;&#x1f525; HTTP 协议请求与响应格式 &#x1f98b; HTTP 请求…...

DDD-全面理解领域驱动设计中的各种“域”

一、DDD-领域 在领域驱动设计&#xff08;Domain-Driven Design&#xff0c;DDD&#xff09;中&#xff0c;**领域&#xff08;Domain&#xff09;**指的是软件系统所要解决的特定业务问题的范围。它涵盖了业务知识、规则和逻辑&#xff0c;是开发团队与领域专家共同关注的核心…...

PHP防伪溯源一体化管理系统小程序

&#x1f50d; 防伪溯源一体化管理系统&#xff0c;品质之光&#xff0c;根源之锁 &#x1f680; 引领防伪技术革命&#xff0c;重塑品牌信任基石 我们自豪地站在防伪技术的前沿&#xff0c;为您呈现基于ThinkPHP和Uniapp精心锻造的多平台&#xff08;微信小程序、H5网页&…...

纯css实现div宽度可调整

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>纯css实现div尺寸可调整</title><style…...

C# 中使用Hash用于密码加密

通过一定的哈希算法&#xff08;典型的有MD5&#xff0c;SHA-1等&#xff09;&#xff0c;将一段较长的数据映射为较短小的数据&#xff0c;这段小数据就是大数据的哈希值。他最大的特点就是唯一性&#xff0c;一旦大数据发生了变化&#xff0c;哪怕是一个微小的变化&#xff0…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...