使用 Vue 3 的 watchEffect 和 watch 进行响应式监视
Vue 3 的 Composition API 引入了 <script setup> 语法,这是一种更简洁、更直观的方式来编写组件逻辑。结合 watchEffect 和 watch,我们可以轻松地监视响应式数据的变化。本文将介绍如何使用 <script setup> 语法结合 watchEffect 和 watch,并通过一个示例展示它们的用法。
什么是 <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 时向服务器发送请求。我们可以使用 watchEffect 和 watch 来实现这一功能,并提供两个按钮来增加水温和水位。
以下是完整的代码示例:
<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>
代码解析
-
定义响应式数据:
- 使用
ref函数定义了两个响应式数据temp和height,分别表示水温和水位。 - 初始值设置为
temp = 50(水温)和height = 70(水位)。
- 使用
-
使用
watchEffect:watchEffect自动跟踪temp和height的变化。- 当
temp >= 60或height >= 80时,触发副作用函数,打印日志并模拟发送请求。
-
使用
watch:watch显式地监视temp和height的变化。- 当
temp或height发生变化时,触发回调函数,打印日志并模拟发送请求。
-
增加温度和水位的函数:
increaseTemp:每次点击按钮,水温增加 10°C。increaseHeight:每次点击按钮,水位增加 10cm。
对比 watchEffect 和 watch
| 特性 | watchEffect | watch |
|---|---|---|
| 依赖收集 | 自动收集副作用函数中的响应式依赖 | 需要显式指定要监视的依赖 |
| 使用场景 | 适合不需要明确指定依赖的场景 | 适合需要明确指定依赖的场景 |
| 初始化执行 | 立即执行副作用函数 | 默认不会立即执行,除非设置 { immediate: true } |
| 性能 | 依赖自动收集,可能稍慢 | 依赖明确,性能稍高 |
总结
通过 <script setup> 语法,我们可以更简洁地编写 Vue 组件的逻辑。watchEffect 和 watch 是 Vue 3 中用于监视响应式数据变化的强大工具:
watchEffect适合自动跟踪依赖的场景。watch适合需要显式控制依赖的场景。
在实际开发中,可以根据具体需求选择合适的工具。希望本文能帮助你更好地理解和使用 watchEffect 和 watch。如果你有任何问题或建议,欢迎在评论区留言讨论!
相关文章:
使用 Vue 3 的 watchEffect 和 watch 进行响应式监视
Vue 3 的 Composition API 引入了 <script setup> 语法,这是一种更简洁、更直观的方式来编写组件逻辑。结合 watchEffect 和 watch,我们可以轻松地监视响应式数据的变化。本文将介绍如何使用 <script setup> 语法结合 watchEffect 和 watch&…...
Vue.js 高级组件开发
Vue.js 高级组件开发:构建一个智能动态表单生成器 ——从可复用架构到性能优化的全链路实践 引言:为什么需要高级组件? 在现代前端开发中,组件不仅是UI的封装,更是业务逻辑的载体。一个“高级”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 函数调用实例,涵盖从函数定义、注册到实际调用的全流程,以「天气查询」功能为例,结合代码详细说明: 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 剧本(Playbooks)2.2. 变量定义2.3. 角色(Roles)2.4. Inventory 文件2.5. 数据类型2.6. 引用变量 在 Ansible 里&#x…...
kamailio-5.8.4-centos9编译
安装必要的依赖包 在开始编译之前,你需要安装编译 Kamailio 所需的一些基础依赖包: dnf install -y make gcc gcc-c flex bison libxml2-devel openssl-devel sqlite-devel mysql-devel pcre-devel libcurl-devel下载并解压 Kamailio 源码包 假设你已经…...
单例模式 - 单例模式的实现与应用
引言 单例模式(Singleton Pattern)是设计模式中最简单且最常用的模式之一。它确保一个类只有一个实例,并提供一个全局访问点来访问该实例。单例模式常用于需要全局唯一对象的场景,如配置管理、日志记录、线程池等。 本文将详细介…...
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是一个开源的分布式协调服务,由Apache软件基金会提供,主要用于解决分布式应用中的数据管理、状态同步和集群协调等问题。通过提供一个高性能、高可用的协调服务,帮助构建可靠的分布式系统。 Zookeeper的特点和功能…...
DiffuEraser: 一种基于扩散模型的视频修复技术
视频修复算法结合了基于流的像素传播与基于Transformer的生成方法,利用光流信息和相邻帧的信息来恢复纹理和对象,同时通过视觉Transformer完成被遮挡区域的修复。然而,这些方法在处理大范围遮挡时常常会遇到模糊和时序不一致的问题࿰…...
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 珠宝加工与常用宝石列表(紫色史诗级): World of Warcraft [CLASSIC] Jewelcrafting & Gemstone_wlk宝石属性一览表-CSDN博客...
AI刷题-最小化团建熟悉程度和
目录 问题描述 输入格式 输出格式 解题思路: 状态表示 状态转移 动态规划数组 预处理 实现: 1.初始化: 2.动态规划部分: (1)对于已分组状态的,跳过: (2&…...
一文详解Filter类源码和应用
背景 在日常开发中,经常会有需要统一对请求做一些处理,常见的比如记录日志、权限安全控制、响应处理等。此时,ServletApi中的Filter类,就可以很方便的实现上述效果。 Filter类 是一个接口,属于 Java Servlet API 的一部…...
应用层协议 HTTP 讲解实战:从0实现HTTP 服务器
🌈 个人主页:Zfox_ 🔥 系列专栏:Linux 目录 一:🔥 HTTP 协议 🦋 认识 URL🦋 urlencode 和 urldecode 二:🔥 HTTP 协议请求与响应格式 🦋 HTTP 请求…...
DDD-全面理解领域驱动设计中的各种“域”
一、DDD-领域 在领域驱动设计(Domain-Driven Design,DDD)中,**领域(Domain)**指的是软件系统所要解决的特定业务问题的范围。它涵盖了业务知识、规则和逻辑,是开发团队与领域专家共同关注的核心…...
PHP防伪溯源一体化管理系统小程序
🔍 防伪溯源一体化管理系统,品质之光,根源之锁 🚀 引领防伪技术革命,重塑品牌信任基石 我们自豪地站在防伪技术的前沿,为您呈现基于ThinkPHP和Uniapp精心锻造的多平台(微信小程序、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用于密码加密
通过一定的哈希算法(典型的有MD5,SHA-1等),将一段较长的数据映射为较短小的数据,这段小数据就是大数据的哈希值。他最大的特点就是唯一性,一旦大数据发生了变化,哪怕是一个微小的变化࿰…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”,无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息: 关注测试号:扫二维码关注测试号。 发送模版消息: import requests da…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
Windows 下端口占用排查与释放全攻略
Windows 下端口占用排查与释放全攻略 在开发和运维过程中,经常会遇到端口被占用的问题(如 8080、3306 等常用端口)。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口,帮助你高效解决此类问题。 一、准…...
DAY 45 超大力王爱学Python
来自超大力王的友情提示:在用tensordoard的时候一定一定要用绝对位置,例如:tensorboard --logdir"D:\代码\archive (1)\runs\cifar10_mlp_experiment_2" 不然读取不了数据 知识点回顾: tensorboard的发展历史和原理tens…...
2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】
1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...
