Vue3-18-侦听器watch()、watchEffect() 的基本使用

什么是侦听器

个人理解:当有一个响应式状态(普通变量 or 一个响应式对象)发生改变时,我们希望监听到这个改变,并且能够进行一些逻辑处理。那么侦听器就是来帮助我们实现这个功能的。
侦听器 其实就是两个函数,watch() 或者是 watchEffect() 。
watch() 的特点: 被侦听的数据源非常明确,逻辑代码与被侦听的数据源相互独立,可维护性较好;
watchEffect() 的特点:出现在这里边的响应式状态就会被监听,(就是被监听的数据源 和 逻辑代码 写在一起了);watchEffect() 的监听是立即执行的,不是非得等到值发生改变时才开始执行。下面通过案例来体会一下它们的用法。

watch 侦听器

语法格式:
watch(被监听的响应式状态,(新值,旧值)=>{ 逻辑代码 },{可选的配置对象})
一共有 三个参数:
参数1 : 指定被监听的状态,可以是一个变量或对象
参数2 :监听到之后的响应回调函数,
参数3 :其他的属性配置,可选的,不是很常用


【注意】:
   watch第一个参数可以同时监听多个状态,写成数组的形式,但是笔者不建议这样使用,如果想监听多个状态,可以分开一个一个的写嘛。

watch 监听一个 ref 的普通响应式状态

这是最基本的使用,直接上代码:
一个文本输入框,
一个普通的响应式变量,
当文本输入框中的内容发生改变时,在侦听器的逻辑中修改 普通变量的值。

<template><!-- 监听器的使用 --><div><!-- 普通的响应式状态 -->textValue : <input type="text" v-model="textValue"><br>otherValue1 : {{ orhterValue1 }} <br></div></template><script setup lang="ts">import { ref,watch } from 'vue'// 声明一个 文本输入框的值const textValue = ref('这是文本输入框')// 声明一个 变量,当 textValue 发生变化时,这个变量也发生变化const orhterValue1 = ref('')// 监听 textValue 这个变量的状态变化watch(textValue,(newValue:string,oldValue:string)=>{console.log(`oldValue is ${oldValue}`)console.log(`newValue is ${newValue}`)console.log(`textValue is ${textValue.value}`)// 当textValue 的值发生改变时,我们修改 otherValue1 的值orhterValue1.value = '改变了'+new Date().getTime()})</script><style scoped>
</style>

运行效果:

初始状态文本框改变之后
在这里插入图片描述在这里插入图片描述

watch 监听一个reactive的响应式对象

当想监听一个对象是否发生改变时,需要使用reactive 创建响应式对象;
而且,这个监听是深度监听,即,无论这个对象的属性有多少层,都能够被监听到;
而且,监听的回调函数的两个参数都是一样的,全都是新值对象,因为这就是一个对象!(这一条可能比较晦涩难懂,记住就行了)

案例 :
有一个响应式的对象,
有一个按钮,
点击按钮,改变对象的某个属性,触发侦听器的逻辑

<template><!-- 监听器的使用 --><div><!-- 监听一个对象 -->stu : {{ stu }}<br><button @click="changeStu">点击修改对象的属性</button></div></template><script setup lang="ts">import { reactive,watch } from 'vue'// 声明一个响应式的对象const stu = reactive({id:100,name:'小红',classInfo:{classId:'001',className:'快乐足球一班'}})// 修改对象的属性的方法const changeStu = ()=>{stu.classInfo.className = '拒绝踢足球二班'}// 监听对象发生了变化 : 需要使用 reactive// 且此处的 newValue 和 oldValue 是一样的,因为它是一个对象,都是更新后的值watch(stu,(newValue,oldValue)=>{console.log(`oldValue is `,oldValue)console.log(`newValue is `,newValue)console.log(`stu is `,newValue)})</script><style scoped>
</style>

运行效果:

在这里插入图片描述

watch 监听一个对象的某个属性

通过 getter 方法的形式,将对象的属性作为被侦听的对象。
getter方法 : 其实就是写一个简单的函数,返回被侦听的对象。
这种监听,无论是 ref 还是 reactive 声明的响应式对象,都是可以的。

案例 :
有一个响应式的对象,
有一个按钮,
点击按钮,改变对象的某个属性,触发侦听器的逻辑

<template><!-- 监听器的使用 --><div><!-- 监听一个对象的其中的某个属性 -->stu : {{ stu }}<br><button @click="changeStu">点击修改对象的属性</button></div></template><script setup lang="ts">import { reactive,watch } from 'vue'// 声明一个响应式的对象const stu = reactive({id:100,name:'小红',classInfo:{classId:'001',className:'快乐足球一班'}})// 修改对象的属性的方法const changeStu = ()=>{stu.classInfo.className = '拒绝踢足球二班'}// 通过getter 函数的方式监听对象某个属性的值watch(()=> stu.classInfo.className,(newValue,oldValue)=>{console.log(`oldValue is `,oldValue)console.log(`newValue is `,newValue)console.log(`stu is `,newValue)})</script><style scoped></style>

运行效果:

在这里插入图片描述

watchEffect侦听器

特点 :
只要是出现在 watchEffect 中的响应式的状态,就会被纳入监听,
当响应式状态发生改变时,会自动触发侦听器的逻辑。
它可以比较方便的监听多个状态值,但是,只要有一个值触发了,就会把整个的侦听逻辑执行一遍!

案例 :
一个文本输入框,可以监听文本输入框的值;
一个按钮,点击修改 对象的一个属性,该属性被侦听器监听;

<template><!-- 监听器的使用 --><div><!-- 普通的响应式状态 -->textValue : <input type="text" v-model="textValue"><br><hr><!-- 监听一个对象 -->stu : {{ stu }}<br><button @click="changeStu">点击修改对象的属性</button></div></template><script setup lang="ts">import { ref,reactive,watchEffect} from 'vue'// 声明一个 文本输入框的值const textValue = ref('这是文本输入框')// 声明一个响应式的对象const stu = reactive({id:100,name:'小红',classInfo:{classId:'001',className:'快乐足球一班'}})// 修改对象的属性的方法const changeStu = ()=>{stu.classInfo.className = '拒绝踢足球二班'}// 通过 watchEffect 进行监听watchEffect(()=>{// 监听普通的属性if(textValue.value.length > 7){console.log('检测到了 textValue 属性的修改')console.log('textValue : ',textValue.value)console.log('---------------')}// 监听对象的属性if(stu.classInfo.className.length > 6){console.log('检测到了className属性的修改')console.log('className : ',stu.classInfo.className)console.log('---------------')}})</script><style scoped>
</style>

运行效果:

在这里插入图片描述

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

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

相关文章

Process On在线绘制流程图

目录 一.ProcessOn 1.1.介绍 1.2.直接网上使用 二.绘制门诊流程图 三.绘制住院流程图 四.绘制药库采购入库流程图 五.绘制OA会议流程图 今天就到这里了哦!!!希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.ProcessOn 1.1.介绍 ProcessOn&#xff08;流程&#…

智能优化算法应用:基于蝠鲼觅食算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蝠鲼觅食算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蝠鲼觅食算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝠鲼觅食算法4.实验参数设定5.算法结果6.…

Vue学习计划-Vue2--VueCLi(五)全局事件总线、消息订阅与发布(pubsub)

抛出问题:我们多级组件&#xff0c;或者任意不想关的子组件如何传递数据呢&#xff1f; 1. 全局事件总线&#xff08;$bus&#xff09; 一种组件间通信的方式&#xff0c;适用于任意组件间通信 全局事件总线示意图&#xff1a; 安装全局事件总线&#xff1a; new Vue({..…

无人机高空巡查+智能视频监控技术,打造森林防火智慧方案

随着冬季的到来&#xff0c;森林防火的警钟再次敲响&#xff0c;由于森林面积广袤&#xff0c;地形复杂&#xff0c;且人员稀少&#xff0c;一旦发生火灾&#xff0c;人员无法及时发现&#xff0c;稍有疏忽就会酿成不可挽救的大祸。无人机高空巡查智能视频监控是一种非常有效的…

MySQL如何进行Sql优化

&#xff08;1&#xff09;客户端发送一条查询语句到服务器&#xff1b; &#xff08;2&#xff09;服务器先查询缓存&#xff0c;如果命中缓存&#xff0c;则立即返回存储在缓存中的数据&#xff1b; &#xff08;3&#xff09;未命中缓存后&#xff0c;MySQL通过关键字将SQ…

19.(vue3.x+vite)v-if和v-for哪个优先级更高

前端技术社区总目录(订阅之前请先查看该博客) v-if和v-for哪个优先级更高 (1)实践中不应该把v-for和v-if放一起,可以包一层template (2)在vue2中,v-for的优先级是高于v-if (3)在vue3中,v-for的优先级是低于v-if 组件代码 <template><div><!--包一…

Hazel引擎学习(十二)

我自己维护引擎的github地址在这里&#xff0c;里面加了不少注释&#xff0c;有需要的可以看看 参考视频链接在这里 这是这个系列的最后一篇文章&#xff0c;Cherno也基本停止了Games Engine视频的更新&#xff0c;感觉也差不多了&#xff0c;后续可以基于此项目开发自己想要…

树莓派,opencv,Picamera2利用舵机云台追踪人脸

一、需要准备的硬件 Raspiberry 4b两个SG90 180度舵机&#xff08;注意舵机的角度&#xff0c;最好是180度且带限位的&#xff0c;切勿选360度舵机&#xff09;二自由度舵机云台&#xff08;如下图&#xff09;Raspiberry CSI 摄像头 组装后的效果&#xff1a; 二、项目目标…

数据结构与算法—排序算法(一)时间复杂度和空间复杂度介绍

排序算法 文章目录 排序算法1.排序算法的介绍1.1 排序的分类 2.算法的时间复杂度2.1 度量一个程序(算法)执行时间的两种方法2.2 时间频度2.2.1 忽略常数项2.2.2 忽略低次项2.2.3 忽略系数 2.3 时间复杂度2.3.1 常见的时间复杂度2.3.1.1 常数阶 O ( 1 ) O(1) O(1)2.3.1.2 对数阶…

Excel高效办公:文秘与行政办公的智能化革新

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f91f; 代理 IP 推荐&#xff1a;&#x1f449;品易 HTTP 代理 IP &#x1f485; 想寻找共同学习交流的小伙伴&#xff0c…

Java版本+鸿鹄企业电子招投标系统源代码+支持二开+Spring cloud +鸿鹄电子招投标系统

​项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。为了符合国家电子招投标法律法规及相关规范&#xff0…

java设计模式学习之【代理模式】

文章目录 引言代理模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用图片加载示例代码地址 引言 在现实生活中&#xff0c;我们经常使用代理来处理我们不想直接参与或无法直接参与的事务&#xff0c;例如&#xff0c;使用律师来代表法庭上的案件。在软件开发…

克隆图[中等]

一、题目 给你无向 连通 图中一个节点的引用&#xff0c;请你返回该图的 深拷贝&#xff08;克隆&#xff09;。图中的每个节点都包含它的值val&#xff08;int&#xff09;和其邻居的列表list[Node]。 class Node {public int val;public List<Node> neighbors; }测试…

计算机如何看待内存

计算机如何看待内存&#xff1b; 对象在内存中如何表示&#xff0c;如何操纵对象&#xff1b;

使用 Axios 进行网络请求的全面指南

使用 Axios 进行网络请求的全面指南 本文将向您介绍如何使用 Axios 进行网络请求。通过分步指南和示例代码&#xff0c;您将学习如何使用 Axios 库在前端应用程序中发送 GET、POST、PUT 和 DELETE 请求&#xff0c;并处理响应数据和错误。 准备工作 在开始之前&#xff0c;请…

Java 反射:探索运行时行为的强大工具

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、浅层理解 1.1 定义 1.2 我的理解 二、反射基础与应用 2.1 反射基础 2.2 反射的高级应用 三、一些反射的例子 3.1 获取类…

GitHub帐户管理更改电子邮件

登录到您的 GitHub 帐户&#xff1a; 前往 GitHub 网站并使用您的凭据登录。 访问个人设置&#xff1a; 单击右上角的您的头像&#xff0c;然后选择“Settings”&#xff08;设置&#xff09;。 选择电子邮件选项卡&#xff1a; 在左侧边栏中选择“Emails”&#xff08;电子邮…

快速入门Tailwind CSS:从零开始构建现代化界面

快速入门Tailwind CSS&#xff1a;从零开始构建现代化界面 介绍 Tailwind CSS 是一个以原子类的方式快速构建界面的 CSS 框架。它提供了丰富的预定义类&#xff0c;使得开发者能够快速构建样式和布局。 安装和设置 首先&#xff0c;我们需要在项目中安装 Tailwind CSS。可以…

CSS特效030:日蚀动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…

Docker知识点整理

Docker和虚拟机技术的区别&#xff1a; 传统的虚拟机&#xff0c;可以虚拟出一条硬件&#xff0c;运行一个完整的操作系统&#xff0c;在这个操作系统上安装和运行所需的软件 容器内的应用可以直接运行在宿主 主机的内核中&#xff0c;容器没有自己的内核&#xff0c;也不用虚…