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

Vue 3 中 watch 的使用与深入理解

news 来源：原创 2025/6/25 1:57:09

在 Vue 3 的 Composition API 中，watch 是一个非常强大的工具，用于监听响应式数据的变化并做出相应的处理。本文将通过一段实际代码来深入解析 watch 的行为和使用技巧。

🧩 示例代码回顾

import { reactive, watch } from 'vue'const state = reactive({a: 1,b: 2,c: 3
})watch(() => {console.log(state.a + state.b)return state.a + state.b},(val) => {console.log(val * 2)}
)setTimeout(() => {state.a++//state.bstate.b--
}, 1000)

🔍 初识 watch

基本结构

Vue 的 watch 函数接收三个参数：

source（监听源）：可以是一个响应式引用（如 ref）、一个返回值的 getter 函数、或一个包含多个源的数组。
callback（回调函数）：当 source 变化时执行的函数。
options（可选配置）：例如 { immediate: true, deep: true }。

本例中的逻辑

我们定义了一个响应式对象 state，包含属性 a、b 和 c。
使用 watch 监听 state.a + state.b 的变化，并在变化时打印其两倍值。
在 1 秒后修改a和 b 的值。

⚙️ 深入分析

1. 初始化阶段

当组件加载时，watch 的第一个函数会被立即调用：

() => {console.log(state.a + state.b) // 输出 3return state.a + state.b
}

此时 a = 1, b = 2，所以 a + b = 3，控制台输出 3。

由于这是第一次运行，还没有发生任何变化，因此不会触发回调 (val) => console.log(val * 2)。

2. 修改状态后的行为

1 秒后，执行以下操作：

state.a++ // a = 2
state.b-- // b = 1

此时 a + b = 3，与之前的值相同。

虽然 a 和 b 都发生了变化，但它们的和没有改变，因此 watch 回调 (val) => console.log(val * 2) 不会被触发。

但是，下面这行代码仍然会执行：

console.log(state.a + state.b) // 输出 3

这是因为每次依赖项发生变化时，getter 函数都会重新执行一次以检查是否有变化。

📌 控制台输出顺序

页面加载时：3（来自watch函数体内 console.log）
1 秒后：
-3（来自watch函数体再次执行）
- ❌ 不会输出 6，因为 a + b 的值没有改变

🧪 如何让`watch`强制触发？

如果你希望即使值不变也触发回调，可以考虑以下方式：

✅ 使用 `immediate: true`

watch(() => {console.log(state.a + state.b)return state.a + state.b},(val) => {console.log(val * 2)},{ immediate: true }
)

这样你会看到两次 3和一次 6（在 setTimeout 后）。

注意：deep: true 对基础类型无效，通常用于对象或数组。

💡 实际应用场景

watch 常用于以下场景：

表单验证：监听输入框内容变化
数据同步：当某个值变化时更新其他状态
异步请求：根据用户输入发起搜索请求
路由守卫：监听路由变化并执行相应逻辑

🧠 小结

知识点	内容
`watch`初始执行	会执行一次 getter 函数，但不会触发回调
触发回调条件	必须是返回值发生变化才会触发
控制台输出	即使不触发回调，getter 函数也会重新执行
强制首次触发	可使用 `{ immediate: true }`

📚 总结

Vue 3 的watch 提供了灵活的数据监听机制，但它的行为有时可能会让人困惑。理解它的工作原理，尤其是如何判断“变化”，对于编写高效且可维护的响应式逻辑至关重要。

通过上面的例子，我们不仅掌握了watch的基本用法，还了解了它的内部机制以及如何控制其行为。希望这篇文章能帮助你更好地理解和使用 Vue 3 的响应式系统！

Vue 3 中 watch 的使用与深入理解

在 Vue 3 的 Composition API 中，watch 是一个非常强大的工具，用于监听响应式数据的变化并做出相应的处理。本文将通过一段实际代码来深入解析 watch 的行为和使用技巧。 🧩 示例代码回顾 import { reactive, watch } from vueconst state …...

编程日记 2025/6/25 1:57:09

嵌入式学习笔记 D21：双向链表的基本操作

双向链表的定义与创建双向链表的插入双向链表的查找双向链表的修改双向链表的删除双向链表的逆序MakeFile工具使用一、双向链表的定义与创建 1.双向链表的定义： 双向链表是在单链表的每个结点中，再设置一个指向其前一个结点的指针域。 struct DOUNode…...

编程日记 2025/6/22 20:41:27

pciutils-3.5.5-win64工具的使用方法

目录简介： 方法一：使用设备管理器方法二：pciutils-3.5.5-win64 简介： window系统下查看PCIe设备信息比较困难 linux版本下，查看PCIE的信息比较容易，可在安装插件后直接使用命令得出。例如&#xf…...

编程日记 2025/6/20 11:08:30

全息美AISEO引领AIGEO新趋势

内容概要在数字化营销变革的浪潮中，全息美AISEO为企业注入了全新的活力。通过结合先进的技术与创造性的策略，AISEO不仅提升了品牌的可见度，更通过精准的用户定位，实现了信息的高效传播。尤其在当下竞争日益激烈的市场环境中&…...

编程日记 2025/6/25 1:36:40

平滑过滤值策略

该策略是一种基于技术分析的交易策略，主要通过计算一系列指标来判断市场趋势，并根据这些指标生成交易信号。策略概述该策略的核心在于利用多个技术指标来分析市场动态，并据此制定交易决策。它结合了价格动量、波动性和趋势跟踪等多种因素，旨在提高交易的准确性和效率。…...

编程日记 2025/6/25 1:44:40

Windows平台OpenManus部署及WebUI远程访问实现

前言：继DeepSeek引发行业震动后，Monica.im团队最新推出的Manus AI 产品正席卷科技圈。这款具备自主思维能力的全能型AI代理，不仅能精准解析复杂指令并直接产出成果，更颠覆了传统人机交互模式。尽管目前仍处于封闭测试阶段&#xf…...

编程日记 2025/6/23 1:31:10

极验证Geetest 通过python代理透传

看了几个破解Geetest 四代滑块的视频和文章，有点望而生畏，github上也有收集极验四代滑块所有图片后经过ai训练做的破解代码，但作者说成功率只有90%。于是考虑通过python透传的方法，j就是对自动化脚本套个【网页界面】的壳&#…...

编程日记 2025/6/19 23:56:11

JDK 1.8 全解析：从核心特性到企业实战的深度实践

引言 JDK 1.8 作为 Java 生态发展史上的里程碑版本，自 2014 年发布以来，凭借 Lambda 表达式、Stream API、新日期时间 API 三大核心特性，彻底重塑了 Java 编程范式。本文结合 Oracle 官方文档、蚂蚁集团、京东零售等企业级实战案例&#xff…...

编程日记 2025/6/19 20:52:05

OptiStruct实例：汽车声控建模

本章通过一个Tim-BaDy模型，展示利用AemmiecaviyMet工具进行声腔网格划分的过程因为南腔是考康边界的声场，所以在开展腔建机之的N营涉设物建大致封闭的边界模器东有内商院建权为例，首先需要准备自车身所合之的、首先委部)结构的有限元型车内声…...

编程日记 2025/6/22 5:22:26

k8s(12) — 版本控制和滚动更新(金丝雀部署理念)

金丝雀部署简介： 1、基本概念金丝雀部署是一种软件开发中的渐进式发布策略，其核心思想是通过将新版本应用逐步发布给一小部分用户（即 “金丝雀” 用户），在真实环境中验证功能稳定性和性能表现，再逐步扩大发…...

编程日记 2025/6/21 16:42:22

基于matlab实现AUTOSAR软件开发---答疑6

最近有少朋友在咨询我关于模型生成A2L文件，之后在把elf文件的地址提取进去，生成最终的A2L的操作，这个其实可以看下mathwork的帮助文档，地址如下： https://www.mathworks.com/help/ecoder/ug/asap2-cdf-calibration.htmlhttps://www.mathworks.com/help/ecoder/ug/asap2-c…...

编程日记 2025/6/20 16:31:42

铜墙铁壁 - 服务网格的安全之道 (Istio 实例)

铜墙铁壁 - 服务网格的安全之道 (Istio 实例) 在微服务架构中，服务间的通信是频繁且复杂的。传统的安全模型常常假设内部网络是可信的，这在现代分布式系统和云原生（尤其是零信任）环境中是远远不够的。我们需要解决几个核心安全问题：通信加密 (Encryption)：如何确保服务 …...

编程日记 2025/6/24 19:53:30

计量——检验与代理变量

1.非嵌套模型的检验 1Davidson-Mackinnon test 判断哪个模型好 log（y）β0β1x1β2x2β3x3u log（y）β0β1log（x1）β2log（x2）β3log（x3）u 1.对log&#xff…...

编程日记 2025/6/23 22:56:30

【C++】解析C++面向对象三要素：封装、继承与多态实现机制

解析C面向对象三要素：封装、继承与多态实现机制 1. 面向对象设计基石2. 封装：数据守卫者2.1 访问控制实现2.2 封装优势 3. 继承：代码复用艺术3.1 继承的核心作用3.2 继承类型对比3.3 典型应用场景3.4 构造函数与析构函数处理3.4.1 构造顺序控…...

编程日记 2025/5/29 17:57:11

c语言写一个五子棋

c语言 IsWin判赢 display 画棋盘判断落子的坐标是否已有棋子判断落子坐标范围是否超出范围 // 五子棋 #include <stdio.h> #include <stdlib.h>// 画棋盘 void display(char map[][10]) {system("clear");printf(" 0 1 2 3 4 5 6 7 8 9\n&…...

编程日记 2025/6/22 11:54:19

深度解析 IDEA 集成 Continue 插件：提升开发效率的全流程指南

一、插件核心功能与应用场景 Continue 是一款专为 JetBrains IDE 设计的 AI 编程助手插件，基于大语言模型实现以下核心功能： 智能代码生成：支持根据自然语言描述生成完整方法、单元测试或设计模式（如线程安全单例模式&#xff0…...

编程日记 2025/6/20 1:53:53

Node.js

本文来源 ： 腾讯元宝 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，采用事件驱动和非阻塞 I/O 模型，专为构建高性能、可扩展的网络应用而设计。以下是其核心特性和应用场景的总结： 1…...

编程日记 2025/6/24 18:35:19

idea经常卡顿解决办法

一：前言 （1）使用idea工具开发过久，出现卡顿，等待响应二：原因 （1）给idea设置的运行内存过小，需要使用的内存超过设置的内存 （2）插件过多&…...

编程日记 2025/6/22 8:48:30

【python】字典：： a list of dictionaries

No, actions is not a dictionary. It’s a list of dictionaries. Each item in the list is a dictionary with three key-value pairs: “measure” (number), “resource” (string), and “reason” (string). Here’s the structure: actions is a list []Each element…...

编程日记 2025/6/21 17:12:14

高效电脑隐私信息清理实用工具

软件介绍本文介绍的这款Privacy Eraser，它是一款电脑系统隐私清理工具。功能介绍这款工具能够清理电脑里的多种信息，比如最近文件、临时文件、注册表信息，还有浏览器插件以及日志文件等等。引导提示注重隐私保护的小伙伴一定要将这款…...

编程日记 2025/6/23 16:43:31

在ubuntu系统中将vue3的打包文件dist 部署nginx 并且配置ssl证书以https方式访问

在ubuntu系统中将vue3的打包文件dist 部署nginx 并且配置ssl证书以https方式访问确保 Nginx 已安装准备 Vue 3 打包文件配置 Nginx编辑 Nginx 配置文件启用配置文件测试 Nginx 配置重新加载 Nginx配置 SSL 证书获取 SSL 证书验证证书自动续期验证部署注意事项确保 Nginx 已安…...

编程日记 2025/6/21 15:37:17

MH22D3开发高级UI应用，适配arm2d驱动

在资源有限的嵌入系统上，要开发出具有现代风格（圆弧，表盘，滚动，滑动，透明，图层叠加等）的UI应用，需要极高的cpu算力和ram，flash资源的支持。但是往往鱼和熊掌…...

编程日记 2025/5/31 21:14:06

MongoDB数据库深度解析：架构、特性与应用场景

在现代应用程序开发中，数据存储技术的选择至关重要。在众多的数据库管理系统中，MongoDB以其灵活性和强大的功能迅速崛起，成为NoSQL数据库中的佼佼者。本文将深入解析MongoDB的架构、核心特性、性能优化及其在实际应用中的最佳实践&#xff0c…...

编程日记 2025/6/21 23:48:20

LeetCode 235. 二叉搜索树的最近公共祖先 LeetCode 701.二叉搜索树中的插入操作 LeetCode 450.删除二叉搜索树中的节点

LeetCode 235. 二叉搜索树的最近公共祖先思路： 根据二叉搜索树的特性，对 “基于二叉树的最近公共祖先 ” 进行优化，在二叉树寻找最近公共祖先时，需要分别对根节点的两个子树进行遍历来判断两个节点是异侧还是同侧。但是在二叉搜…...

编程日记 2025/6/22 11:04:57

GPU异步执行漏洞攻防实战：从CUDA Stream竞争到安全编程规范

点击 “AladdinEdu，同学们用得起的【H卡】算力平台”，H卡级别算力，按量计费，灵活弹性，顶级配置，学生专属优惠。引言在高校实验室的GPU加速计算研究中，多卡并行编程已成为提升深度学习训练效…...

编程日记 2025/6/25 1:51:12

[c语言日寄]数据结构：栈

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2025/6/20 2:00:45

day21：零基础学嵌入式之数据结构

一、双向链表（doulinklist） 1. 2.创建 struct DouLinkList *CreateDouLinkList() {struct DouLinkList *dl malloc(sizeof(struct DouLinkList));if(NULL dl){fprintf(stderr, "CreateDouLinkLis malloc");return NULL;}dl->head NUL…...

编程日记 2025/6/23 23:11:57

数据结构之图的应用场景及其代码

一，最小生成树最小生成树（Minimum Spanning Tree, MST）是图论中的经典问题，旨在通过选择无向连通图中的边，使得所有节点连通且总边权最小。 1.1 普里姆（Prim）算法普里姆算法是一种用于求解…...

编程日记 2025/6/20 20:26:43

python克洛伊婚纱摄影预约管理系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/6/23 21:25:01

GCC 使用说明

参数 -fPIC ppc_85xx-gcc -shared -fPIC liberr.c -o liberr.so -fPIC 作用于编译阶段，告诉编译器产生与位置无关代码(Position-Independent Code)， 则产生的代码中，没有绝对地址，全部使用相对地址，故而代码可以被加…...

编程日记 2025/6/2 20:56:32

配置别名路径 @

CRA本身把webpack配置包装到了黑盒里无法直接修改，需要借助一个插件 - craco 1. 路径解析配置（Webpack）-- craco 插件把 / 解析为 src/ 配置步骤： 1.安装 craco npm i -D craco/craco 2. 项目根目录下创建配置文件 craco.co…...

编程日记 2025/6/21 15:36:59

MYSQL基本命令

目录 1.登录命令2.操作数据库命令2.1查询数据库(show)2.2 创建数据库(create)2.3使用数据库(use) 3.操作表命令3.1增加表3.2查询表3.3修改表(alert)3.4 删除(delete/drop) 1.登录命令 mysql -uroot -p2.操作数据库命令 2.1查询数据库(show) show databases;2.2 创建数据库(c…...

编程日记 2025/6/21 9:57:07

C#语法基础

一、什么是.NET平台 .NET 是由 Microsoft 支持的免费开放源代码应用程序平台。 .NET .NET 是一个安全、可靠且高性能的应用程序平台。C# 是 .NET 的编程语言。它是强类型且类型安全的，并集成了并发和自动内存管理。 C# C# 是一种新式、安全且面向对象的编程语言&…...

编程日记 2025/6/24 11:56:45

深度学习框架对比---Pytorch和TensorFlow

一、计算图与执行模式 1. 图的本质：动态图 vs 静态图 PyTorch（动态图，Eager Execution） 运行机制：代码逐行执行，张量操作立即生效，计算图在运行时动态构建。x torch.tensor(1.0, requires_gra…...

编程日记 2025/6/22 8:48:30

antdv3 Tabs.TabPane 右上角增加一个角标Badge

1、Tabs官方说明 Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 2、Badge角标官方效果图 Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js 3、Tabs.TabPane要实现的效果 4、代码 <Tabs v-m…...

编程日记 2025/6/22 23:18:54

Python-88：英雄升级奖励

问题描述在一个游戏中，小W拥有 n 个英雄，每个英雄的初始能力值均为 1。她可以通过升级操作来提升英雄的能力值，最多可以进行 k 次升级。每次升级操作包含以下步骤： 选择一个英雄选择一个正整数 x将该英雄的能力值 aiai 更新…...

编程日记 2025/6/24 11:42:00

使用uv创建python项目

uv创建项目 uv init -p 3.12 qwen3env # -p 指定python版本 # qwen3env是项目名称 # 可以使用下面的步骤 mkdir qwen3env cd qwen3env uv venv -p3.12 .venv # 基于 Python 3.12 创建名为 .venv 的虚拟环境 uv init第一种方式第二种方式内容如下执行python脚本 uv ru…...

编程日记 2025/6/25 1:22:09

window 显示驱动开发-命令和 DMA 缓冲区简介

命令和 DMA 缓冲区非常相似。但是，命令缓冲区由用户模式显示驱动程序使用，DMA 缓冲区由显示微型端口驱动程序使用。命令缓冲区具有以下特征： 它永远不会由 GPU 直接访问。硬件供应商控制格式。它从呈现应用程序的专用地址空间中的常规…...

编程日记 2025/6/20 13:09:58

深光-谷歌TV TADA/奈飞Netflix/亚马逊Prime Video/YouTube等测试外包服务

一、谷歌TV TADA测试服务 1.CTS CTS测试是一系列旨在确保设备与Android操作系统兼容性的自动化测试，CTS是所有测试项中测试量最大的一项测试。 2.GTS GTS测试是确保Android设备能够正确集成和运行Google Mobile Services（GMS）的关键步骤&am…...

编程日记 2025/6/23 17:46:11

《教育退费那些事儿：从困境到破局》

《教育退费那些事儿：从困境到破局》教育退费：不容忽视的热点问题在当今社会，教育消费已成为家庭支出的重要组成部分。无论是 K12 阶段的学科辅导、艺术特长培训，还是成人的职业技能提升、学历继续教育，家长和学生们…...

编程日记 2025/6/1 4:08:14

AtCoder 第405场初级竞赛 A~E题解

A Is it rated? 【题目链接】原题链接：A - Is it rated? 【考点】嵌套判断【题目大意】有两个分区，有不同的评分区间，给一个评分 r 和分区 x，判断是否在评分区间中。【解析】先判断在属于哪个分区，再判断是否在该分区评分区间中。【难度】 GESP一级【…...

编程日记 2025/6/24 1:39:46

登录接口中图片验证码Tesseract-OCR识别Java脚本

项目上移植了研发部的产品，文档不全，项目上验证码功能无法关闭，又要做接口/性能测试，开发不配合（作为测试多么无奈），此方法识别命中率不高，仅作借鉴。版本JDK11 import io.restass…...

编程日记 2025/6/23 19:32:39

专项智能练习（定义判断）_DA_02

2. 单选题虚假同感偏差也叫虚假一致性偏差，是指人们常常会高估或夸大自己的信念、判断及行为的普遍性。在认知他人时总喜欢把自己的特性赋予他人身上，假定他人与自己是相同的，而当遇到与此相冲突的信息时，会坚信自己信念和判断的…...

编程日记 2025/6/22 11:06:17

安卓A15系统实现修改锁屏界面默认壁纸功能

最近遇到一个A15系统项目，客户要求修改锁屏界面的默认壁纸，客户提供了一张壁纸图片，但是从A15系统的源代码查看时才知道谷歌已经去掉了相关的代码，已经不支持了，A13和A14系统好像是支持的，A15系统的Wallpap…...

编程日记 2025/6/22 18:52:10

Linux之Yum源与Nginx服务篇

1.Yum源知识理论总结概括 Yum源概述 Yum 源即软件仓库的标识，里面承载着软件包集合 Yum源组成包含模块【OS】、【everything】、【EPOL】、【debuginfo】、【source】、【update-source】【os】:简称operator system 它内部包含操作系统的核心组件&#x…...

编程日记 2025/6/23 16:43:15