vue3 之 组合式API—watch函数

news2024/11/14 13:52:24
watch函数

作用:侦听一个或者多个数据的变化,数据变化时执行回调函数
两个额外参数:
1.immediate(立即执行)2.deep(深度侦听)

场景:比如选择不同的内容请求后端不同数据时 如下图
在这里插入图片描述

基础使用—侦听单个数据

1.导入watch函数
2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
  })
</script>
基础使用—侦听多个数据

说明:同时侦听多个响应式数据的变化,不管拿个数据变化都需要执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
    console.log(`count或者name变化了,[newCount, newName],[oldCount,oldName])
  })
</script>
额外参数——immediate

在侦听器创建时立即出发回调,响应式数据变化之后继续执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
  },{
    immediate: true
  })
</script>
额外参数——deep

通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep

!!! deep有性能损耗 在绝大数情况下不建议开启

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>
精准侦听对象的某个属性

需求:在不开启deep的前提下,侦听age的变化,只有age变化时才执行回调
在这里插入图片描述

watch(
 ()=> state.value.age,
 ()=> {
  console.log('age发生变化了')
 }
总结

1️⃣作为watch函数的第一个参数,ref对象需要添加.value吗?
不需要,watch会自动读取

2️⃣watch只能侦听单个数据吗?
单个或者多个

3️⃣不开启deep,直接修改嵌套属性能触发回调吗?
不能,默认是浅层侦听

4️⃣不开启deep,想再某个层次比较深的属性变化时执行回调怎么做?
可以把第一个参数写成函数的写法,返回要监听的具体属性

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

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

相关文章

[C++]:15.继承

继承 一.继承&#xff1a;1.继承的概念和基本操作&#xff1a;1.概念&#xff1a;2.基本操作&#xff1a; 2.继承格式和多种继承方法&#xff1a;1.基本继承格式&#xff1a;2.继承关系访问限定符 3.子类对象和父类对象之间的赋值&#xff1a;1.为什么存在赋值兼容转换&#xf…

基于Spring Boot的校友录管理系统

基于Spring Boot的校友录管理系统 1、绪论1.1 研究背景及意义1.2 研究内容 2、系统设计2.1 系统架构设计2.2 系统功能设计2.3 数据库设计2.3.1 系统实体类2.3.2 实体之间的联系 3、系统实现3.1 系统登录页3.2 系统首页3.3 校友信息实现3.3.1 校友批量上传 3.4 活动中心实现3.4.…

DS:经典算法OJ题(2)

创作不易&#xff0c;友友们给个三连吧&#xff01;&#xff01; 一、旋转数组&#xff08;力扣&#xff09; 经典算法OJ题&#xff1a;旋转数组 思路1&#xff1a;每次挪动1位&#xff0c;右旋k次 时间复杂度&#xff1a;o(N^2) 右旋最好情况&#xff1a;k是n的倍数…

‘begin_code.h‘ file not found 问题解决办法

/usr/include/x86_64-linux-gnu/SDL2/SDL_platform.h:179:10: fatal error: ‘begin_code.h’ file not found 问题解决办法 问题 在使用SDL2库时编译程序出现如下问题&#xff1a; 解决办法 在Google搜索未果后&#xff0c;考虑到对于头文件找不到问题&#xff0c;可以通…

clickhouse在MES中的应用-跟踪扫描

开发的MES&#xff0c;往往都要做生产执行跟踪扫描&#xff0c;这样会产生大量的扫描数据&#xff0c;用关系型数据库&#xff0c;很容易造成查询冲突的问题。 生产跟踪扫描就发生的密度是非常高的&#xff0c;每个零部件的加工过程&#xff0c;都要被记录下来&#xff0c;特别…

老师没收学生东西违法吗怎么处理

身为一名老师&#xff0c;面对没收学生东西这个话题&#xff0c;确实让人感到有些尴尬和无奈。毕竟&#xff0c;我们教育的初衷是为了引导学生健康成长&#xff0c;而不是与他们产生矛盾和冲突。 老师在未经允许的情况下没收学生的物品&#xff0c;是违法的。学生的个人财物&a…

python+flask人口普查数据的应用研究及实现django

作为一款人口普查数据的应用研究及实现&#xff0c;面向的是大多数学者&#xff0c;软件的界面设计简洁清晰&#xff0c;用户可轻松掌握使用技巧。在调查之后&#xff0c;获得用户以下需求&#xff1a; &#xff08;1&#xff09;用户注册登录后&#xff0c;可进入系统解锁更多…

微服务的幂等性

微服务架构设计的中心思想是将服务进行拆分&#xff0c;但是在这个过程中&#xff0c;如果被依赖的服务发生奔溃&#xff0c;就会引起一系列问题。为了解决这个问题&#xff0c;就会引入重试的机制&#xff0c;重试又会引入幂等性的问题&#xff0c;下面我们就分析这个过程&…

面试150 颠倒二进制位 位运算分治 逻辑右移

Problem: 190. 颠倒二进制位 文章目录 思路复杂度位运算分治法 思路 &#x1f468;‍&#x1f3eb; 参考题解 >>>&#xff1a;逻辑右移&#xff08;符号位一起移动&#xff0c;高位补零&#xff09; 复杂度 时间复杂度: O ( log ⁡ n ) O(\log{n}) O(logn) 空间…

Quartus IP学习之ISSP(In-System Sources Probes)

一、ISSP IP概要&#xff1a; ISSP&#xff1a;In-System Sources & Probes Intel FPGA IP 作用&#xff1a; 分为In-System Sources与In-System Probesn-System Sources&#xff0c;输入端&#xff0c;等价于拨码开关&#xff0c;通过输入板载FPGA上的拨码开关状态改变…

如何结合ChatGPT生成个人魔法咒语词库

3.6.1 ChatGPT辅助力AI绘画 3.6.1.1 给定主题让ChatGPT直接描述 上面给了一个简易主题演示一下&#xff0c;这是完全我没有细化的提问&#xff0c;然后把直接把这些关键词组合在一起。 关键词&#xff1a; 黄山的美景&#xff0c;生机勃勃&#xff0c;湛蓝天空&#xff0c;青…

鲜花销售|鲜花销售小程序|基于微信小程序的鲜花销售系统设计与实现(源码+数据库+文档)

鲜花销售小程序目录 目录 基于微信小程序的鲜花销售系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、前台功能模块 2、后台功能模块 (1) 后台登录 (2) 管理员功能模块 用户管理 商家管理 鲜花信息管理 鲜花分类管理 管理员管理 系统管理 (3) 商家功…

SerDes PoC 电感网络工作原理详解

如下图所示,PoC的工作原理可以描述如下: 1. 直流状态时,电感处于短路状态,电容处于开路状态,因此,接收端的电源能够通过电感注入到信号传输系统中,并在另一端通过电感为本地电路供电,而不会透过电容影响到两端的高速收发器; 2. 交流状态时,即高频信号注入时,电容器是…

华为机考入门python3--(5)牛客5-进制转换

分类&#xff1a;数字 知识点&#xff1a; 十六进制转int num int(hex_num, 16) int转十六进制 hex_num hex(num) 题目来自【牛客】 hex_num input().strip() dec_num int(hex_num, 16) print(dec_num) by 软件工程小施同学

【OpenCV学习笔记28】- OpenCV 中的直方图 - 直方图 - 2:直方图均衡

这是对于 OpenCV 官方文档中 图像处理 的学习笔记。学习笔记中会记录官方给出的例子&#xff0c;也会给出自己根据官方的例子完成的更改代码&#xff0c;同样彩蛋的实现也会结合多个知识点一起实现一些小功能&#xff0c;来帮助我们对学会的知识点进行结合应用。 如果有喜欢我笔…

【Java并发】聊聊Disruptor背后高性能的原理

为什么需要Disruptor 对于单机生产者消费者来说&#xff0c;JUC本身提供了阻塞队列&#xff0c;ArrayBlockingQueue、LinkedBlockingQueue 等&#xff0c;但是为了保证数据安全&#xff0c;使用了reentrantLock进行加锁操作会影响性能&#xff0c;另一方面&#xff0c;本身如果…

Kafka相关内容复习

为什么要用消息队列 解耦 允许你独立的扩展或修改两边的处理过程&#xff0c;只要确保它们遵守同样的接口约束。 可恢复性 系统的一部分组件失效时&#xff0c;不会影响到整个系统。消息队列降低了进程间的耦合度&#xff0c;所以即使一个处理消息的进程挂掉&#xff0c;加入队…

XCTF:3-1[WriteUP]

从题目中获取文件 使用file命令查看文件类型 修改后缀为.rar后进行解压缩 再次使用file命令查询该文件的类型 再次修改后缀为.pcap或者.pcapng 使用wireshark打开&#xff0c;直接搜索flag字样 在多个数据包里发现了flag.rar、flag.txt等文件 尝试使用http导出文件 有一个fl…

小程序<scroll-view/>组件详解及使用指南

目录 引言小程序的流行和重要性scroll-view 组件在小程序中的作用和优势什么是 scroll-view 组件scroll-view 组件的基本概念scroll-view 组件的基本功能scroll-view 组件的属性与用法scroll-view 组件的常用属性参考代码scroll-view 组件的滚动事件scrolltoupper

【开源】SpringBoot框架开发大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…