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…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制： 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程，创建出来的进程就是子进程，原来的进程为父进程。…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...
《Docker》架构
文章目录 架构模式单机架构应用数据分离架构应用服务器集群架构读写分离/主从分离架构冷热分离架构垂直分库架构微服务架构容器编排架构什么是容器，docker，镜像，k8s 架构模式 单机架构 单机架构其实就是应用服务器和单机服务器都部署在同一…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...