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

vue3中如何实现多个侦听器(watch)

news 2026/4/12 5:02:45 
<body>
<div id="app"><input type="button" value="更改名字" @click="change">
</div>
<script src="vue.js"></script>
<script>new Vue({el: '#app',data: {food: {id: 1,name: '冰激凌'}},methods: {change() {this.food.name = '棒棒糖'}},watch: {// 第一种方式：监听整个对象，每个属性值的变化都会执行handler// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的food: {// 每个属性值发生变化就会调用这个函数handler(newVal, oldVal) {console.log('oldVal:', oldVal)console.log('newVal:', newVal)},// 立即处理 进入页面就触发immediate: true,// 深度监听 属性的变化deep: true},// 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数// 函数执行后，获取的 newVal 值和 oldVal 值不一样'food.name'(newVal, oldVal) {console.log('oldVal:', oldVal)   // 冰激凌console.log('newVal:', newVal)   // 棒棒糖}}})
</script>
</body>
  1. immediate（立即处理 进入页面就触发）
  2. deep（深度监听）

https://cn.vuejs.org/guide/essentials/watchers.html

<script setup lang = "ts">
import { ref, reactive, watch } from 'vue'const person = reactive({name: 'zhangsan',age: 18,school: {address: 'jinan'}
})const updatePerson = () => {person.name = 'lisi'person.school.address = 'beijing'
}watch([() => person.name, () => person.school.address],(newInfo: string[], oldInfo: string[]) => {console.log(newInfo) // ['lisi', 'beijing']console.log(oldInfo) // ['zhangsan', 'jinan']},{ deep: false }
)
</script><template><h3>{{ person.name }}</h3><h3>{{ person.school.address }}</h3><button @click="updatePerson">修改人员信息</button>
</template>

https://blog.csdn.net/qq_52421092/article/details/131067716

<script>
import { toRefs, watch, reactive } from 'vue'
export default {setup() {const state = reactive({money: 100,car: {rand: "宝马",}})}watch([() => state.money, () => state.car],(newVal, oldVal) => {console.log("变化了", newVal, oldVal)  // newVal新值是一个数组， 值顺序就是侦听的顺序  oldVal一样},{deep: true,immediate: false})return {...toRefs(state)}
}
</script>

在这里插入图片描述

三、watchEffect
不用指明监视哪个属性,监视的回调用到哪个属性，就去监视哪个属性

  • watch可以访问新值和旧值，watchEffect不能访问。
  • watch需要指明监听的对象，也需要指明监听的回调。
  • watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。
  • watch只有监听的值发生变化的时候才会执行，但是watchEffect不同，每次代码加载watchEffect都会执行。
    在这里插入图片描述

相关文章：

vue3中如何实现多个侦听器(watch)

<body> <div id"app"><input type"button" value"更改名字" click"change"> </div> <script src"vue.js"></script> <script>new Vue({el: #app,data: {food: {id: 1,name: 冰激…...

编程日记 2024/3/22 21:47:25

【深度学习基础知识】IOU、GIOU、DIOU、CIOU

这里简单记录下IOU及其衍生公式。   为了拉通IOU及其衍生版的公式对比&#xff0c;以及方便记忆&#xff0c;这里用一个统一的图示来表示出所有的参数 【&#xff21;】目标框的区域【&#xff22;】预测框的区域【&#xff23;】&#xff21;与&#xff22;的交集【&#xff…...

编程日记 2024/3/22 21:46:24

【自用笔记】单词

cognitive 认知formulation 阐述方式nonlinear 非线性nonconvex 非凸&#xff0c;无最优解cumulative return 累计回报propagation 传播optimization 优化objective 目标标准差&#xff08;standard deviation&#xff09;正态分布&#xff08;Normal distribution&#xff09;…...

编程日记 2024/3/22 21:44:22

Linux之shell条件判断

华子目录 if语句单分支案例 双分支案例 多分支 case多条件判断格式执行过程示例 if语句 单分支 # 语法1&#xff1a; if <条件表达式> then指令 fi#语法2&#xff1a; if <条件表达式>;then指令 fi案例 编写脚本choice1.sh,利用单分支结构实现输入2个整数&#…...

编程日记 2024/3/22 21:42:20

“postinstall“: “patch-package“ 修补安装包补丁

在 package.json 文件里&#xff0c;postinstall 是一个钩子脚本&#xff0c;它在每次运行 npm install 命令后自动执行。当你在该字段中指定 "patch-package" 时&#xff0c;意思是在 npm install 安装所有依赖包之后&#xff0c;自动运行 patch-package 命令。 pa…...

编程日记 2024/3/22 21:39:18

PHP+MySQL开发组合：多端多商户DIY商城源码系统 带完整的搭建教程以及安装代码包

近年来&#xff0c;电商行业的迅猛发展&#xff0c;越来越多的商户开始寻求搭建自己的在线商城。然而&#xff0c;传统的商城系统往往功能单一&#xff0c;无法满足商户个性化、多样化的需求。同时&#xff0c;搭建一个功能完善的商城系统需要专业的技术团队和大量的时间成本&a…...

编程日记 2024/3/22 21:37:16

Node.js常用命令

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它使得开发者可以使用 JavaScript 来编写服务端的应用。Node.js 提供了大量的命令行工具&#xff0c;以下是一些最常用的 Node.js 命令&#xff1a; 1. node 运行 JavaScript 文件&#xff1a;node [fil…...

编程日记 2024/3/22 21:33:12

LeetCode 2. 两数相加

目录 题目题目描述示例 1&#xff1a;示例 2&#xff1a;示例 3&#xff1a;提示&#xff1a;原题链接 题解解题思路代码实现&#xff08;C&#xff09; 题目 题目描述 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xf…...

编程日记 2024/3/22 21:31:09

抖去推无人直播+矩阵托管+AI文案撰写一体化工具如何开发搭建

一、 开发和搭建抖去推无人直播矩阵托管AI文案撰写一体化工具需要以下步骤&#xff1a; 确定功能需求&#xff1a;确定抖去推无人直播、矩阵托管和AI文案撰写的具体功能需求&#xff0c;如直播推流、直播管理、托管服务、AI文案生成等。 技术选型&#xff1a;选择适合开发该工…...

编程日记 2024/3/22 21:30:08

【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件

简介 弹窗是移动应用中常见的一种用户界面元素&#xff0c;常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用&#xff0c;除此之外还支持自定义弹窗&#xff0c;来满足各种不同的需求。 下面是所有涉及到的弹窗组件官方文档…...

编程日记 2024/3/22 21:28:06

【嵌入式学习】Qtday03.21

一、思维导图 二、练习 自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面。&#xff08;不要使用课堂上的图片和代码&#xff0c;自己发挥&#xff0c;有利于后面项目的完成&#xff09; 要求&#xff1a; 1. 需要使用Ui界面文件进行界面设计 2. ui界面上的组件…...

编程日记 2024/3/22 21:27:05

【C语言】C语言运算符优先级详解

文章目录 &#x1f4dd;前言&#x1f309;运算符优先级简述 &#x1f320;逻辑与和逻辑或&#x1f309;赋值和逗号运算符 &#x1f320;位运算&#x1f309;条件表达式&#x1f309;位运算与算术运算结合&#x1f309;混合使用条件表达式和赋值运算符&#x1f309; 逗号运算符的…...

编程日记 2024/3/22 21:26:04

第十节HarmonyOS 常用容器组件3-GridRow

1、描述 栅格容器组件&#xff0c;仅可以和栅格子组件&#xff08;GridCol&#xff09;在栅格布局场景中使用。 2、子组件 可以包含GridCol子组件。 3、接口 GridRow(options:{columns: number | GridRowColumnOption, gutter?: Length | GutterOption, Breakpoints?: B…...

编程日记 2024/3/22 21:24:02

SCXI-1193是National Instruments公司生产的吗？

NI SCXI-1193是一款高密度、32通道RF多路复用器开关模块。 NI SCXI-1193 是一款由 National Instruments&#xff08;NI&#xff09;公司生产的屏蔽式电缆。这款电缆通常用于连接数据采集设备和传感器或执行器&#xff0c;以实现信号传输和数据采集。SCXI-1193 电缆具有高度灵活…...

编程日记 2024/3/22 21:19:59

使用clion开发tftlcd屏，移植驱动时遇到的问题记录

问题现象 屏幕只有一半屏在刷新 问题出现的情况(在CLION开发时遇到过) 总结...

编程日记 2024/3/22 21:14:54

工程信号的去噪和（分类、回归和时序）预测

&#x1f680;【信号去噪及预测论文代码指导】&#x1f680; 还为小论文没有思路烦恼么&#xff1f;本人专注于最前沿的信号处理与预测技术——基于信号模态分解的去噪算法和深度学习的信号&#xff08;回归、时序和分类&#xff09;预测算法&#xff0c;致力于为您提供最精确、…...

编程日记 2024/3/22 21:07:46

【VUE】前端阿里云OSS断点续传，分片上传

什么是OSS&#xff1a; 数据以对象&#xff08;Object&#xff09;的形式存储在OSS的存储空间&#xff08;Bucket &#xff09;中。如果要使用OSS存储数据&#xff0c;您需要先创建Bucket&#xff0c;并指定Bucket的地域、访问权限、存储类型等属性。创建Bucket后&#xff0c;您…...

编程日记 2024/3/22 21:03:40

春招面试高频题目总结

面试问题 redis 可以用于进程间通信吗&#xff1f; Why&#xff1f;How? ---> 延展一下 有哪些进程间通信技术, 优劣如何&#xff1f; 有大量的插入sql语句&#xff0c;一条条的插入性能很差&#xff0c;如何通过事务进行优化&#xff1f; 保证线程安全的策略有哪些&…...

编程日记 2024/3/22 21:02:39

基于SSM+Jsp+Mysql的KTV点歌系统

基于SSMJspMysql的KTV点歌系统 基于SSMJspMysql的KTV点歌系统的设计与实现 开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工…...

编程日记 2024/3/22 21:00:36

Docker Oracle提示密码过期

进入docker docker exec -it oracle bash 修改环境变量文件 vi .bash_profile 为以下内容 # .bash_profile# Get the aliases and functions if [ -f ~/.bashrc ]; then. ~/.bashrc fi# User specific environment and startup programsPATH$PATH:$HOME/binexport PATH expo…...

编程日记 2024/3/22 20:59:35

Jenkins 学习总结滩

先唠两句&#xff1a;参数就像餐厅点单 把API想象成一家餐厅的“后厨系统”。 ? 路径参数/dishes/{dish_id} -> 好比你要点“宫保鸡丁”这道具体的菜&#xff0c;它是菜单&#xff08;资源路径&#xff09;的一部分。 查询参数/dishes?spicytrue&typeSichuan -> …...

编程新知 2026/4/12 2:39:20

【GUI-Agent】阶跃星辰 GUI-MCP 解读---()---决策层兴

先回顾&#xff1a;三次握手&#xff08;建立连接&#xff09;核心流程&#xff08;实际版&#xff09; 为了让挥手流程衔接更顺畅&#xff0c;咱们先快速回顾三次握手的实际核心&#xff0c;避免上下文脱节&#xff1a; 第一步&#xff08;客户端→服务器&#xff09;&#xf…...

编程新知 2026/4/12 2:27:09

从识别到创作：Hunyuan OCR与Z-Image-Turbo在NPU平台上的协同进化，重塑AI视觉工作流

1. 当OCR遇上图像生成&#xff1a;Hunyuan与Z-Image-Turbo的化学反应 第一次看到Hunyuan OCR和Z-Image-Turbo在同一个NPU平台上跑起来时&#xff0c;我正忙着处理一堆杂乱的产品说明书。这些文档有扫描件、手机拍摄的模糊照片&#xff0c;甚至还有手写批注的PDF。传统方案需要…...

编程新知 2026/4/12 2:08:52

数电小白必看：最小项在逻辑函数中的神奇作用（附实例解析）

数电小白必看&#xff1a;最小项在逻辑函数中的神奇作用&#xff08;附实例解析&#xff09; 数字电路设计就像搭积木&#xff0c;而最小项就是其中最基础的"乐高颗粒"。想象一下&#xff0c;你正在设计一个智能家居控制系统——如何用最简洁的逻辑实现"当有人移…...

编程新知 2026/4/12 2:04:51

ROS 2传感器数据融合入门：手把手教你用Python同步处理摄像头图像和激光雷达点云

ROS 2多传感器数据融合实战&#xff1a;基于Python的视觉-激光时空同步技术 在移动机器人感知系统开发中&#xff0c;摄像头和激光雷达的组合堪称经典配置——前者提供丰富的纹理和颜色信息&#xff0c;后者则能精确测量物体距离。但当你尝试同时使用这两种传感器时&#xff0c…...

编程新知 2026/4/11 23:47:11

再次革新 .NET 的构建和发布方式（三）媒

1 安装与初始化 # 全局安装 OpenSpec npm install -g fission-ai/openspeclatest # 在项目目录下初始化 cd /path/to/your-project openspec init 初始化时&#xff0c;OpenSpec 会提示你选择使用的 AI 工具&#xff08;Claude Code、Cursor、Trae、Qoder 等&#xff09;。 3 O…...

编程新知 2026/4/11 23:07:43

Nunchaku FLUX.1 CustomV3效果展示：长宽比灵活适配（4:3/16:9/1:1）输出稳定性

Nunchaku FLUX.1 CustomV3效果展示&#xff1a;长宽比灵活适配&#xff08;4:3/16:9/1:1&#xff09;输出稳定性 1. 开篇&#xff1a;惊艳的图片生成新体验 你是否曾经遇到过这样的困扰&#xff1a;想要生成一张特定比例的图片&#xff0c;却发现AI模型总是输出不稳定的结果&…...

编程新知 2026/4/11 22:55:36

AI原生软件监控为何总失效？揭秘3层链路追踪断点、4类Span丢失场景及零代码修复方案

第一章&#xff1a;AI原生软件监控失效的根源性认知 2026奇点智能技术大会(https://ml-summit.org) AI原生软件——即以大语言模型、多模态代理、动态推理链为核心构件&#xff0c;具备自主规划、上下文感知与运行时代码生成能力的系统——正从根本上瓦解传统监控范式的底层假…...

编程新知 2026/4/11 22:37:23

技术拆解：豆包接入抖音电商的AI购物链路，从对话到下单如何实现15秒闭环

技术拆解&#xff1a;豆包接入抖音电商的AI购物链路&#xff0c;从对话到下单如何实现15秒闭环前言字节豆包App内测接入抖音电商&#xff0c;实现对话内下单闭环。本文从技术架构角度拆解AI购物链路的实现方式&#xff0c;以及对电商开发者的影响。一、AI购物链路架构用户自然语…...

编程新知 2026/4/11 22:25:02

Java项目Loom升级实战：3步完成Spring WebFlux与虚拟线程深度整合（附压测对比数据）

第一章&#xff1a;Java项目Loom响应式编程转型概览Java Loom 项目引入的虚拟线程&#xff08;Virtual Threads&#xff09;与结构化并发&#xff08;Structured Concurrency&#xff09;为响应式编程范式带来了根本性变革。它并非替代 Project Reactor 或 RxJava&#xff0c;而…...

编程新知 2026/4/11 22:10:55