watch监听的使用

watch是什么?

在 Vue 3 中,watch 函数被重新设计为一个独立的 API,用于观察数据变化并执行相应的操作。

watch 函数接受两个参数:

  • 第一个参数可以是一个函数或数组。如果是函数,则返回要监听的数据,当数据变化时会触发回调函数;如果是数组,则返回一个数组,包含要监听的多个数据,当任意一个数据变化时都会触发回调函数。
  • 第二个参数是一个回调函数,用于处理数据变化时的操作。回调函数接收两个参数,第一个参数为新值,第二个参数为旧值。
  • 有两个额外的参数:1.immediate(画面加载后立即执行),2.deep(深度侦听)
案例1-监听单个数据:
<template><h1>数量变化1:{{ count1 }}</h1><button @click="addcount">++count/单监听</button>
</template><script setup>
// 导入watch
import {ref , watch} from 'vue'// 声明变量count
const count1=ref(0)// count触发方法
const addcount=()=>{count1.value++
}// 触发监听器---单个数据监听
watch(count1,(newValue,oldValue)=>{console.log(`count发生变化啦!旧值为:${oldValue},新值为:${newValue}`);
})
</script><style lang="less" scoped></style>

传入要侦听的响应式数据(ref对象)和回调函数。回调中可以拿到新值和旧值 

 案例2-监听单个数据:
<template><h1>数量变化2:{{ name }}/{{ count2 }}</h1><button @click="repname">++count/双监听</button>
</template><script setup>
// 导入watch
import {ref , watch} from 'vue'// 声明变量count
const name=ref('李明')
const count2=ref(0)// 触发方法
const repname=()=>{count2.value++name.value='李四到此一游!!!'
}// 触发监听器---多个数据监听
watch([count2,name],([newCount,newName],[oldCount,oldName])=>{console.log(`count变化,旧值为:${oldCount},新值为:${newCount}`);console.log(`name变化,旧值为:${oldName},新值为:${newName}`);
})
</script><style lang="less" scoped></style>

以数组的方式传入多个ref变量,其中一个变化就会触发侦听的回调函数,回调中可以拿到新值和旧值

监听多个值的变化并计算结果,小案例

<template><el-form :model="form" label-width="120px"><el-form-item label="价格"><el-input v-model="form.price" /></el-form-item><el-form-item label="数量"><el-input v-model="form.count" /></el-form-item><el-form-item label="总价"><el-input v-model="form.total" :readonly="true" /></el-form-item><el-form-item><el-button @click="setForm">计算</el-button></el-form-item></el-form>
</template><script setup>
import { ref, watch } from 'vue';const form = ref({ price: '', count: '', total: '' }
);const setForm = () => {form.value = {price: '24',count: '400',total: '9600'}
}// immediate:立刻执行,进入页面就执行一次,一般用于画面的初始化显示。
watch(form, (newVal, oldVal) => {console.log("进入页面执行了")console.log("新:" + newVal + ",旧:" + oldVal);
}, {immediate: true
})// deep:深度监视,如果要监听的响应式对象中有多个属性,默认是浅层监听。
// 传入的响应式对象,如果是简单类型,可以直接监听,如果是复杂类型,监视不到复杂类型内部属性的变化,按照下面的示例,只有form.value重新设置了一个对象,监听才会触发
// 只有对象的地址发生了变化,才会触发监听,设置deep为true时,对象及对象中的某个属性发生变化时,也可以监听到
// 如果对象中的属性过多,会影响使用,一般不建议开深度监听// 深度监听
watch(form, (newval, oldVal) => {console.log("深度监听触发")console.log(newval);
}, { deep: true })// 精确侦听对象的某个属性
watch(() => form.value.price,(newVal, oldVal) => {console.log("精确侦听对象的某个属性");console.log(newVal, oldVal);}
)// 可以侦听某两个属性操作后的值
watch(() => Number(form.value.price) * Number(form.value.count),(sum) => {console.log("执行了");form.value.total = ''if (sum) {form.value.total = sum.toFixed(2);}}
)
</script><style></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聪明高效能力广,AGI如何赋能内容管理?

文 | 智能相对论 作者 | 叶远风 毫无疑问&#xff0c;现在的大模型在技术比拼之外&#xff0c;如何通过产品化的方式走入到实际业务&#xff0c;是各厂商的着力点。 而一些一贯与数字化场景紧密融合的服务厂商&#xff0c;在大模型浪潮一开始就已经走在落地一线。 大数据基…

【C++高阶(八)】单例模式特殊类的设计

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习C   &#x1f51d;&#x1f51d; 单例模式 1. 前言2. 设计一个不能被拷贝/继承的…

SVN搭建指导

环境 centos 7.9 SVN安装方式一&#xff1a;yum 1.1 http服务 至今还没有搞定网页版&#xff0c;网页版需要搭建apache http服务。遇到如下问题&#xff1a; centos - svn: Could not open the requested SVN filesystem - Stack Overflow 在试了加777权限&#xff0c;加a…

c语言:指针作为参数传递

探究实参与形参它们相互独立 由于主调函数的变量a&#xff0c;b与被调函数的形参x&#xff0c;y它们相互独立。函数 swap 可以修改变量x&#xff0c;y&#xff0c;但是却无法影响到主调函数中的a&#xff0c;b。 现在利用取地址运算符&#xff0c;分别打印它们的首地址&#x…

生物识别规划人脸识别方案的概述

方案概述 人脸识别方案采用高性能AI芯片&#xff0c;支持RGB和IR摄像头&#xff0c; 支持LCD显示屏。方案特点 • 普通RGB摄像头和IR摄像头同时参与3D成像RGB摄像头 支持屏幕回显 • 双目摄像头得到特征点视差计算人脸相 对3D深度信息&#xff0c; 同时利用可见光和红外 光谱信…

Axure RP 8 for Mac/win中文版:打造完美交互式原型设计体验

Axure RP 8&#xff0c;一款引领潮流的交互式原型设计工具&#xff0c;为设计师提供了无限的可能性&#xff0c;让他们能够创造出逼真的原型&#xff0c;从而更好地展示和测试他们的设计。 Axure RP 8拥有丰富的功能和工具&#xff0c;让设计师可以轻松地创建出复杂的交互式原…

GSCoolink GSV1201E Type C/DP1.2转HDM1.4

DisplayPort 1.2 to HDMI 1.4 Converter with Embedded MCU 功能特征 1、GSV1201E是一款高性能、低功耗、USB Type-C Alternate Mode DisplayPort 1.2 to HDMI 1.4转换器。 2、显示接口接收器支持21.6Gbps(HBR2&#xff0c;4-lane)。 3、HDMI发射器支持9Gbps(TMDS3G3Lane)。…

Swagger2接口测试文档

目录 一、Swagger简介 1.1 Swagger是什么&#xff1f; 1.2 为什么要用Swagger 1.3 Swagger注解 二、Spring集成Swagger 三、测试环境配置 一、Swagger简介 1.1 Swagger是什么&#xff1f; Swagger是一款RESTFUL接口的文档在线自动生成功能测试功能软件。Swagger是一个规…

Linux之进程(五)(进程控制)

目录 一、进程创建 1、fork函数创建进程 2、fork函数的返回值 3、fork常规用法 4、fork调用失败的原因 二、进程终止 1、进程终止的方式 2、进程退出码 3、进程的退出方法 三、进程等待 1、进程等待的必要性 2、wait函数 3、waitpid函数 四、进程程序替换 1、概念…

Android studio中导入opencv库

具体opencv库的导入流程参考链接&#xff1a;Android Studio开发之路 &#xff08;五&#xff09;导入OpenCV以及报错解决 一、出现的错误&#xff1a;NullPointerException: Cannot invoke “java.io.File.toPath()” because “this.mySdkLocation” is null 解决办法&#…

java获取当前线程的上下文类加载器(context ClassLoader)

当前线程的上下文类加载器初始设置等于加载该应用的类加载器。 代码示例&#xff1a; package com.thb;public class Demo4 {public static void main(String[] args) {System.out.println(Thread.currentThread().getContextClassLoader());} }运行输出&#xff1a;

地质灾害监测预警解决方案

目录 1.前言 2.滑坡监测站建设方案 2.1建站方案 2.2监测指标体系 2.3监测设备配置 3.地面沉降监测建设方案 3.1建设方案 3.2监测指标体系 3.3监测设备配置 4.泥石流监测站建设方案 4.1建设方案 4.2监测指标体系 4.3监测设备配置 5.岩溶塌陷监测站方案 5.1建站方案…

深入理解网络 I/O:FileOutputStream、BufferFileOutputStream、ByteBuffer

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任 Java 开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&…

java8实战 lambda表达式、函数式接口、方法引用双冒号(中)

前言 书接上文&#xff0c;上一篇博客讲到了lambda表达式的应用场景&#xff0c;本篇接着将java8实战第三章的总结。建议读者先看第一篇博客 其他函数式接口例子 上一篇有讲到Java API也有其他的函数式接口&#xff0c;书里也举了2个例子&#xff0c;一个是java.util.functi…

java并发-ConcurrentHashMap 在Java7 和 8 的区别

文章目录 1.Java 7 版本的 ConcurrentHashMap2.Java 8 版本的 ConcurrentHashMap3.分析 Java 8 版本的 ConcurrentHashMap 的重要源码3.1.Node 节点3.2.put 方法源码分析3.3.get 方法源码分析 4.对比 Java7 和 Java8 的异同和优缺点4.1.并发度4.2.保证并发安全的原理4.3.遇到 H…

Jmeter实现CSV数据批量导入

CSV&#xff1a;逗号分隔值&#xff0c;是一种简洁且常见的数据存储格式。 1、参数化&#xff1a; 在Jmeter中&#xff0c;可以通过“用户自定义的变量”来实现参数化使操作方便&#xff0c;使用语法位&#xff1a;${参数名}&#xff0c;如下图&#xff1a; 而CSV也同理&…

本地文件内容搜索神器AnyTXT Searcher如何搭建与远程访问

文章目录 前言1. AnyTXT Searcher1.1 下载安装AnyTXT Searcher 2. 下载安装注册cpolar3. AnyTXT Searcher设置和操作3.1 AnyTXT结合cpolar—公网访问搜索神器3.2 公网访问测试 4. 固定连接公网地址 前言 你是否遇到过这种情况&#xff0c;异地办公或者不在公司&#xff0c;想找…

java注意项--更新中

前言&#xff1a; 1.大小写规定 1.1.类名和接口名&#xff1a;每个单词首字母大写。如GoodStudent&#xff1b; 是一个单词的时候首字母大写。如Student&#xff1b; 1.2.变量和方法名&#xff1a;第一个首字母小写&#xff0c;后序首字母大写。如firstName&#xff1b; 是一…

vue的语法模板与数据绑定的说明

vue的两大模板语法&#xff1a; 1.插值语法 2.指定语法 插值语法&#xff1a;{{}} 功能&#xff1a;用于解析标签体的内容 写法&#xff1a;{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性 指定语法&#xff1a; 功能:用于解析标签(包括:标签属性、标…

ChatGPT助力Excel数据分析:让你的工作事半功倍!

文章目录 一、ChatGPT简介二、ChatGPT在Excel数据分析中的应用1. 数据清洗2. 数据处理3. 数据分析4. 数据可视化 三、如何使用ChatGPT进行Excel数据分析1. 安装ChatGPT插件2. 输入问题或命令3. 查看结果并调整参数4. 导出结果并分享四、总结与展望 《巧用ChatGPT高效搞定Excel数…