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: '冰激凌'}},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>
- immediate（立即处理 进入页面就触发）
- 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: 冰激…...
【深度学习基础知识】IOU、GIOU、DIOU、CIOU
这里简单记录下IOU及其衍生公式。 为了拉通IOU及其衍生版的公式对比，以及方便记忆，这里用一个统一的图示来表示出所有的参数 【Ａ】目标框的区域【Ｂ】预测框的区域【Ｃ】Ａ与Ｂ的交集【ÿ…...
【自用笔记】单词
cognitive 认知formulation 阐述方式nonlinear 非线性nonconvex 非凸，无最优解cumulative return 累计回报propagation 传播optimization 优化objective 目标标准差（standard deviation）正态分布（Normal distribution）…...
Linux之shell条件判断
华子目录 if语句单分支案例 双分支案例 多分支 case多条件判断格式执行过程示例 if语句 单分支 # 语法1： if <条件表达式> then指令 fi#语法2： if <条件表达式>;then指令 fi案例 编写脚本choice1.sh,利用单分支结构实现输入2个整数&#…...
“postinstall“: “patch-package“ 修补安装包补丁
在 package.json 文件里，postinstall 是一个钩子脚本，它在每次运行 npm install 命令后自动执行。当你在该字段中指定 "patch-package" 时，意思是在 npm install 安装所有依赖包之后，自动运行 patch-package 命令。 pa…...
PHP+MySQL开发组合：多端多商户DIY商城源码系统 带完整的搭建教程以及安装代码包
近年来，电商行业的迅猛发展，越来越多的商户开始寻求搭建自己的在线商城。然而，传统的商城系统往往功能单一，无法满足商户个性化、多样化的需求。同时，搭建一个功能完善的商城系统需要专业的技术团队和大量的时间成本&a…...
Node.js常用命令
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使得开发者可以使用 JavaScript 来编写服务端的应用。Node.js 提供了大量的命令行工具，以下是一些最常用的 Node.js 命令： 1. node 运行 JavaScript 文件：node [fil…...
LeetCode 2. 两数相加
目录 题目题目描述示例 1：示例 2：示例 3：提示：原题链接 题解解题思路代码实现（C） 题目 题目描述 给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的…...
抖去推无人直播+矩阵托管+AI文案撰写一体化工具如何开发搭建
一、 开发和搭建抖去推无人直播矩阵托管AI文案撰写一体化工具需要以下步骤： 确定功能需求：确定抖去推无人直播、矩阵托管和AI文案撰写的具体功能需求，如直播推流、直播管理、托管服务、AI文案生成等。 技术选型：选择适合开发该工…...
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件
简介 弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。 下面是所有涉及到的弹窗组件官方文档…...
【嵌入式学习】Qtday03.21
一、思维导图 二、练习 自由发挥登录窗口的应用场景，实现一个登录窗口界面。（不要使用课堂上的图片和代码，自己发挥，有利于后面项目的完成） 要求： 1. 需要使用Ui界面文件进行界面设计 2. ui界面上的组件…...
【C语言】C语言运算符优先级详解
文章目录 📝前言🌉运算符优先级简述 🌠逻辑与和逻辑或🌉赋值和逗号运算符 🌠位运算🌉条件表达式🌉位运算与算术运算结合🌉混合使用条件表达式和赋值运算符🌉 逗号运算符的…...
第十节HarmonyOS 常用容器组件3-GridRow
1、描述 栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用。 2、子组件 可以包含GridCol子组件。 3、接口 GridRow(options:{columns: number | GridRowColumnOption, gutter?: Length | GutterOption, Breakpoints?: B…...
SCXI-1193是National Instruments公司生产的吗？
NI SCXI-1193是一款高密度、32通道RF多路复用器开关模块。 NI SCXI-1193 是一款由 National Instruments（NI）公司生产的屏蔽式电缆。这款电缆通常用于连接数据采集设备和传感器或执行器，以实现信号传输和数据采集。SCXI-1193 电缆具有高度灵活…...
使用clion开发tftlcd屏，移植驱动时遇到的问题记录
问题现象 屏幕只有一半屏在刷新 问题出现的情况(在CLION开发时遇到过) 总结...
工程信号的去噪和（分类、回归和时序）预测
🚀【信号去噪及预测论文代码指导】🚀 还为小论文没有思路烦恼么？本人专注于最前沿的信号处理与预测技术——基于信号模态分解的去噪算法和深度学习的信号（回归、时序和分类）预测算法，致力于为您提供最精确、…...
【VUE】前端阿里云OSS断点续传，分片上传
什么是OSS： 数据以对象（Object）的形式存储在OSS的存储空间（Bucket ）中。如果要使用OSS存储数据，您需要先创建Bucket，并指定Bucket的地域、访问权限、存储类型等属性。创建Bucket后，您…...
春招面试高频题目总结
面试问题 redis 可以用于进程间通信吗？ Why？How? ---> 延展一下 有哪些进程间通信技术, 优劣如何？ 有大量的插入sql语句，一条条的插入性能很差，如何通过事务进行优化？ 保证线程安全的策略有哪些&…...
基于SSM+Jsp+Mysql的KTV点歌系统
基于SSMJspMysql的KTV点歌系统 基于SSMJspMysql的KTV点歌系统的设计与实现 开发语言：Java框架：ssm技术：JSPJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7（一定要5.7版本）数据库工…...
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…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议，专门用于在数字音频设备之间传输数字音频数据。它由飞利浦（Philips）公司开发，以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
AI语音助手的Python实现
引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中，如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议（2PC）通过准备阶段与提交阶段的协调机制，以同步决策模式确保事务原子性。其改进版本三阶段提交协议（3PC…...
结构化文件管理实战：实现目录自动创建与归类
手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题，进而引发后续程序异常。使用工具进行标准化操作，能有效降低出错概率。 需要快速整理大量文件的技术用户而言，这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB，…...
2025年全国I卷数学压轴题解答
第19题第3问: b b b 使得存在 t t t, 对于任意的 x x x, 5 cos x − cos ( 5 x t ) < b 5\cos x-\cos(5xt)<b 5cosx−cos(5xt)<b, 求 b b b 的最小值. 解: b b b 的最小值 b m i n min t max x g ( x , t ) b_{min}\min_{t} \max_{x} g(x,t) bmi…...