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…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
C++：std::is_convertible
C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...