当前位置：首页 > article >正文

Vue3学习（组合式API——Watch侦听器、watchEffect()详解）

article 2025/9/17 4:46:10

目录

一、Watch侦听器。

（1）侦听单个数据。

（2）侦听多个数据。（数组写法？！）

（3）immediate参数。(立即执行回调)

（3）deep参数。(深层监视)

使用deep开启深度侦听监视。（不仅监听对象的地址，还会监听对象的所有子属性变化）

（4）精确侦听对象(ref、reactive)的某个属性。（固定写法的简单回调：()=>xx对象）

一、Watch侦听器。

官方解释：在组合式 API 中，使用 watch 函数在每次响应式状态发生变化时触发回调函数。
基本作用：侦听一个或者多个数据的变化，数据变化时执行回调函数。其中有两个额外的参数：immediate（立即执行）、deep（深度侦听)。

（1）侦听单个数据。

基本语法：watch(ref对象,(newValue,oldValue)=>{ ... })。
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const changeCount = () => {count.value++;}watch(count, (newValue, oldValue) => {console.log('新值：' + newValue)console.log('旧值：' + oldValue)})return {count,changeCount}}}).mount('#app')</script></body></html>

效果。

（2）侦听多个数据。（数组写法？！）

基本语法：watch([ref对象1,ref对象2...],(newArr,oldArr)=>{ ... })。
代码示例。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button>{{nickname}}<button @click="changeNickname">改昵称</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const nickname = ref('张三')const changeCount = () => {count.value++;}const changeNickname = () => {nickname.value = '李四'}/* //监听单个数据watch(count, (newValue, oldValue) => {console.log('新值：' + newValue)console.log('旧值：' + oldValue)}) *///监听多个数据watch([count, nickname], (newArr, oldArr) => {console.log('新数组：' + newArr)console.log('旧数组：' + oldArr)})return {count,nickname,changeCount,changeNickname}}}).mount('#app')</script></body></html>

效果。

（3）immediate参数。(立即执行回调)

基本说明：在侦听器创建时——立即触发回调，响应式数据变化之后继续执行回调。
代码示例。（一进页面里面执行回调！）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const changeCount = () => {count.value++;}//immediate，立即执行回调watch(count, (newValue, oldValue) => {console.log('新值：' + newValue)console.log('旧值：' + oldValue)}, {immediate: true})return {count,changeCount,}}}).mount('#app')</script></body></html>

效果。

（3）deep参数。(深层监视)

基本说明：其中默认的watch进行浅层监视（如：const ref1 = ref(简单类型)，可以直接监视）。默认的watch对于“const ref2 = ref(复杂类型)”，监视不到其内部数据的变化！
deep：true。开启监视侦听内部数据的变化。

这种情况只有修改userInfo整个.value，修改了对象的地址才能侦听监视到。因为默认是浅层的。

使用deep开启深度侦听监视。（不仅监听对象的地址，还会监听对象的所有子属性变化）

代码示例。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="changeCount">count+1</button><div>----------------------------------------------------</div>{{userInfo}}<button @click="changeUserInfo">修改userInfo</button></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const count = ref(0)const userInfo = ref({name: 'zs',age: '18'})const changeCount = () => {count.value++;}const changeUserInfo = () => {userInfo.value.age++;}//浅层侦听watch(userInfo, (newValue) => {console.log(newValue)},{deep: true})return {count,userInfo,changeCount,changeUserInfo}}}).mount('#app')</script></body></html>
效果。

（4）精确侦听对象(ref、reactive)的某个属性。（固定写法的简单回调：()=>xx对象）

基本说明：在不开启deep参数的前提下，侦听某个对象的某个属性的变化，且只有该值发生变化时才执行回调！
代码示例。（ref创建的对象、reactive创建的对象）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{userInfo}}<button @click="changeUserInfo">修改userInfo</button><div>----------------------------------------------------</div>{{userInfo2}}<button @click="changeUserInfo2">修改userInfo2</button></div><script type="module">import { createApp, ref, watch, reactive } from './vue.esm-browser.js'createApp({setup() {const userInfo = ref({name: 'zs',age: '18'})const userInfo2 = reactive({name: 'ls',age: '30'})const changeUserInfo = () => {userInfo.value.age++;}const changeUserInfo2 = () => {userInfo2.name = 'wu'}//watch侦听watch(() => userInfo.value.age, (newValue, oldValue) => {console.log('新' + newValue)console.log('旧' + oldValue)})watch(() => userInfo2.name, (newValue, oldValue) => {console.log('新' + newValue)console.log('旧' + oldValue)})return {userInfo,userInfo2,changeUserInfo,changeUserInfo2}}}).mount('#app')</script></body></html>

效果。

二、watchEffect()。

（1）基本介绍与主要特点。

官方解释：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

基本介绍：
watchEffect 是 Vue 3 中用于响应式数据监听的 API ，属于组合式 API 。
它会立即执行传入的回调函数，并在其依赖的响应式数据变化时重新执行该函数。

主要特点：
自动追踪依赖：无需显式指定依赖项，watchEffect 会自动追踪在回调函数中使用的响应式数据。比如在回调中使用了某个 ref 或 reactive 定义的响应式数据，当该数据变化时，watchEffect 就能感知到并重新执行回调。

响应式副作用处理：专注于处理副作用，只要依赖项发生变化，就会重新执行回调函数，确保获取到最新状态。像执行 DOM 更新、发起 API 请求等操作，都可以在 watchEffect 中进行。

立即执行：与 watch 不同，watchEffect 会在组件初始化时就立即执行回调函数，不需要等到依赖的数据发生变化才执行。

（2）watchEffect()简单案例演示。

代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">{{count}}<button @click="increment">count++</button></div><script type="module">import { createApp, ref, watchEffect } from './vue.esm-browser.js'createApp({setup() {// 定义一个ref类型的响应式数据const count = ref(0);// 定义一个方法用于修改响应式数据const increment = () => {count.value++;};// 使用watchEffect监听响应式数据变化watchEffect(() => {//注意使用的是反引号``console.log(`计数发生变化，当前值为: ${count.value}`);});return {count,increment}}}).mount('#app')</script>
</body></html>

效果。

Vue3学习（组合式API——Watch侦听器、watchEffect()详解）

目录一、Watch侦听器。 （1）侦听单个数据。 （2）侦听多个数据。（数组写法？！） （3）immediate参数。(立即执行回调) （3）deep参数。(深层监…...

编程日记 2025/9/9 4:48:00

【node.js】安装与配置

个人主页：Guiat 归属专栏：node.js 文章目录 1. Node.js简介1.1 Node.js的特点1.2 Node.js架构 2. Node.js安装2.1 下载和安装方法2.1.1 Windows安装2.1.2 macOS安装2.1.3 Linux安装 2.2 使用NVM安装和管理Node.js版本2.2.1 安装NVM2.2.2 使用NVM管理Node…...

编程日记 2025/9/9 4:47:54

《AI大模型应知应会100篇》第62篇：TypeChat——类型安全的大模型编程框架

第62篇：TypeChat——类型安全的大模型编程框架摘要在构建 AI 应用时，一个常见的痛点是大语言模型（LLM）输出的不确定性与格式不一致问题。开发者往往需要手动解析、校验和处理模型返回的内容，这不仅增加了开发成本&a…...

编程日记 2025/9/9 4:48:11

HttpMessageConverter 的作用是什么？它是如何实现请求体到对象、对象到响应体的自动转换的（特别是 JSON/XML）？

HttpMessageConverter (HTTP 消息转换器) 是 Spring MVC 框架中一个非常核心的组件，它的主要作用是在 HTTP 请求和响应体与 Java 对象之间进行双向转换。核心作用： 读取请求体 (Request Body) 到 Java 对象： 当 Controller 方法的参数使用 …...

编程日记 2025/6/15 18:50:10

EdgeShard：通过协作边缘计算实现高效的 LLM 推理

(2024-05-23) EdgeShard: Efficient LLM Inference via Collaborative Edge Computing (EdgeShard：通过协作边缘计算实现高效的 LLM 推理) 作者: Mingjin Zhang; Jiannong Cao; Xiaoming Shen; Zeyang Cui;期刊: （发表日期: 2024-05-23）期刊分区:本地链接: Zhang 等 - 2024 …...

编程日记 2025/9/10 7:49:01

火山 RTC 引擎9 ----集成 appkey

一、集成 appkey 1、网易RTC 初始化过程 1）、添加头文件实现互动直播 - 互动直播 2.0网易云信互动直播产品的基本功能包括音视频通话和连麦直播，当您成功初始化 SDK 之后，您可以简单体验本产品的基本业务流程，例如主播加入房间…...

编程日记 2025/9/12 22:05:13

ArcGIS Pro 3.4 二次开发 - 框架

环境：ArcGIS Pro SDK 3.4 .NET 8 文章目录框架1 框架1.1 如何在 DockPane 可见或隐藏时订阅和取消订阅事件1.2 执行命令1.3 设置当前工具1.4 激活选项卡1.5 激活/停用状态 - 修改条件1.6 判断应用程序是否繁忙1.7 获取应用程序主窗口1.8 关闭 ArcGIS Pro1.9 获取 …...

编程日记 2025/9/7 5:00:22

Adminer：一个基于Web的轻量级数据库管理工具

Adminer 是一个由单个 PHP 文件实现的免费数据库管理工具，支持 MySQL、MariaDB、PostgreSQL、CockroachDB、SQLite、SQL Server、Oracle、Elasticsearch、SimpleDB、MongoDB、Firebird、Clickhouse 等数据库。 Adminer 支持的主要功能如下： 连接数据库服…...

编程日记 2025/9/8 18:33:11

RK3568下QT实现按钮切换tabWidget

运行效果：在 Qt 应用程序开发过程中，TabWidget 是一种非常实用的 UI 组件，它能够以选项卡的形式展示多个页面内容，帮助我们有效组织和管理复杂的界面布局。而在实际使用时，常常会有通过按钮点击来切换 TabWidget 页面的需求，本文将通过一个完整的示例，详细介绍如何在 Q…...

编程日记 2025/9/8 18:33:07

2025 OceanBase 开发者大会全议程指南

5 月 17 日，第三届 OceanBase 开发者大会将在广州举办。我们邀请数据库领军者与AI实践先锋，与开发者一起探讨数据库与 AI 协同创新的技术趋势，面对面交流 OceanBase 在 TP、AP、KV 及 AI 能力上的最新进展，深度体验“打破技术栈…...

编程日记 2025/9/8 18:32:31

GitHub 趋势日报 (2025年05月15日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1TapXWorld/ChinaTextbookPDF教材。⭐ 6685⭐ 15287Roff2xming521/WeClone&…...

编程日记 2025/6/17 8:43:16

day017-磁盘管理-实战

文章目录 1. 硬盘命名规则2. 添加硬盘2.1 查看硬盘名称 3. 硬盘分区3.1 分区命名规则：mbr分区表格式3.2 创建分区：fdisk3.2.1 fdisk -l：查看硬盘及分区信息3.2.2 fdisk /dev/sdc :为该硬盘分区3.2.3 创建扩展分区和逻辑分区3.2.4 保存设置并退…...

编程日记 2025/9/8 18:32:28

【成品设计】STM32和UCOS-II的项目

项目1：《基于STM32和UCOS-II的水质监测系统》 Ps：分为带系统版本和不带系统版本，功能都一样。功能说明： 1. 单片机主控：STM32F103C8T6单片机作为核心控制。 2. 酸碱度传感器：实时采集当前PH值。 3. 水质…...

编程日记 2025/9/10 2:57:10

当通过PHP在线修改文件数组遇到不能及时生效问题

当你通过PHP在线修改文件中的数组（比如配置文件、缓存文件等）后，发现修改不能及时生效，常见原因和解决办法如下： 1. 缓存未刷新问题描述：PHP应用通常会对配置、数据等做缓存（如Redis、Memcached、OPcache、文件缓存等），导致你修改了文件但实际运行时还是旧内容。解决…...

编程日记 2025/7/2 22:18:22

Ngrok 配置：实现 Uniapp 前后端项目内网穿透

文章目录一、下载并安装 ngrok二、配置 ngrok Authtoken三、启动本地 uniapp 项目四、使用 ngrok 暴露本地服务五、通过公网 URL 访问项目六、后端API项目的穿透问题排查 (uni-app 后端 API 示例)交互流程图示七、ngrok Web 界面 (本地监控)八、停止 ngrok总结 ngrok 是一款…...

编程日记 2025/9/8 18:32:21

鸿蒙ArkUI体验：Hexo博客客户端开发心得

最近部门也在跟进鸿蒙平台的业务开发，自己主要是做 Android 开发，主要使用 Kotlin/Java 语言。，需要对新的开发平台和开发模式进行学习，在业余时间开了个项目练手，做了个基于 Hexo 博客内容开发的App。鸿蒙主要使用Ark…...

编程日记 2025/9/11 23:54:10

鸿蒙NEXT开发动画案例10

1.创建空白项目 2.Page文件夹下面新建Spin.ets文件，代码如下： interface TranslateOffset {x?:numbery?:number } /*** SpinKit动画组件 - SpinTen* author: CSDN-鸿蒙布道师* since: 2025/05/16*/ ComponentV2 export struct SpinTen {Require Para…...

编程日记 2025/9/8 18:32:12

Python 的 os 库常见使用方法（操作目录及文件）

前言： os 模块是 Python 标准库中用于与操作系统交互的核心模块，提供了许多操作文件和目录的功能。以下是常见的使用方法： 1. 目录操作方法功能说明示例os.getcwd()获取当前工作目录print(os.getcwd())os.chdir(path)切换当前工作目录os.ch…...

编程日记 2025/8/31 21:59:33

【Linux】Linux安装并配置Redis

目录 1.安装 2.启动服务 3.配置 3.1.绑定地址 3.2.保护模式 3.3.持久化选项 3.3.1.RDB 持久化 3.3.2.AOF 持久化 3.3.3.如何选择 1.安装 Redis 可以从默认的 CentOS 软件仓库中安装。运行以下命令来安装 Redis sudo dnf install redis -y 响应如下 2.启动服务安装完成后&…...

编程日记 2025/9/12 22:43:42

【11408学习记录】考研英语辞职信写作三步法：真题精讲+妙句活用+范文模板

应聘信英语写作2005年考研英语真题小作文写作思路第一段第二段妙句7 9妙句11补充3补充4 第三段妙句成文每日一句词汇第一步：找谓语第二步：断句第三步：简化主句原因状语从句英语写作 2005年考研英语真题小作文 Directions: Two m…...

编程日记 2025/9/8 18:32:06

数据库（一）：分布式数据库

定义分布式数据库（Distributed Database） 是指： 数据分布在多个物理位置，但对用户透明，表现为一个统一逻辑数据库的系统。结构模式（三层模式扩展） 层次作用对应实体用户层提供统一视图&…...

编程日记 2025/9/10 22:38:11

Java并发编程-线程池（三）

文章目录线程池实现原理addWorker(Runnable firstTask, boolean core)1. 状态检查：校验线程池是否允许添加线程2. 工作线程数调整：CAS保证并发安全3. 初始化变量4. 创建 Worker 对象并获取线程5. 加锁保证线程安全6. 启动工作线程7. 异常处理核心作用线…...

编程日记 2025/9/12 23:13:07

《黑马前端ajax+node.js+webpack+git教程》（笔记）——node.js教程+webpack教程（nodejs教程）

黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajaxnode.jswebpackgit），一套全覆盖文章目录 Node.js与Webpack-01.Node.js入门定义和作用什么是前端工程化？（离不开node.js）Node.…...

编程日记 2025/9/9 20:12:02

Flink 快速入门

本文涉及到大量的底层原理知识，包括运行机制图解都非常详细，还有一些实战案例，所以导致本篇文章会比较长，内容比较多，由于内容太多，很多目录可能展示不出来，需要去细心的查看，非常适…...

编程日记 2025/9/8 18:31:57

高效管理多后端服务：Nginx 配置与实践指南

在现代的 Web 开发和运维中，一个系统往往由多个后端服务组成，每个服务负责不同的功能模块。例如，一个电商网站可能包括用户服务、订单服务和支付服务，每个服务都运行在独立的服务器或容器中。为了高效地管理这些服务并提供统一的访…...

编程日记 2025/9/2 19:17:08

阻塞队列：线程安全与生产者消费者模型解析

一、阻塞队列阻塞队列就是基于普通队列做出扩展 1.线程安全的如果针对一个已经满了的队列进行入队列，此时入队列操作就会阻塞，一直阻塞到队列不满（其他线程出队列元素）之后如果针对一个已经空了的队列进行出队列&#xff0c…...

编程日记 2025/9/8 18:31:48

【入门｜Docker】基础知识扫盲：什么是 Docker？

文章目录基础知识扫盲：什么是 Docker？Docker 是什么？Docker 核心组件Docker 与虚拟机的区别Docker 在现代开发中的核心角色Docker 的局限性基础知识扫盲：什么是 Docker？ 最近打算开始系统性地学习与云计算相关的技术…...

编程日记 2025/9/8 18:31:45

如何利用 Java 爬虫获得某书笔记详情：实战指南

在知识分享和学习的领域，许多平台提供了丰富的书籍笔记和学习资源。通过 Java 爬虫技术，我们可以高效地获取这些笔记的详细信息，以便进行进一步的分析和整理。本文将详细介绍如何利用 Java 爬虫获取某书笔记详情，并提供完整的代码…...

编程日记 2025/6/18 6:52:08

【MYSQL】基本查询，表的增删查改

编程日记 2025/9/8 18:31:40

在嵌入式系统中，一般链路层断开多久，断开TCP为好

一、典型场景与推荐策略 1. 实时性优先（工业控制、自动化设备） 需求：快速释放资源，避免因等待重传浪费内存或阻塞任务。策略： 立即断开：在lwip_netif_link_callback中检测到链路断开后直接关闭TCP连接&a…...

编程日记 2025/9/4 14:17:40