vue3 之 组合式API—watch函数

watch函数

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

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

基础使用—侦听单个数据

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

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

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

<script setup>// 1. 导入watchimport { 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. 导入watchimport { 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. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象statewatch(state, ()=>{console.log('数据变化了')})const changeStateByCount = ()=>{// 直接修改不会引发回调执行state.value.count++}
</script>
<script setup>// 1. 导入watchimport { ref, watch } from 'vue'const state = ref({ count: 0 })// 2. 监听对象state 并开启deepwatch(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.mzph.cn/news/666836.shtml

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

相关文章

h.264与h.263的区别

H264标准的主要特点如下&#xff1a; 更高的编码效率&#xff1a;同H.263等标准的特率效率相比&#xff0c;能够平均节省大于50%的码率。 高质量的视频画面&#xff1a;H.264能够在低码率情况下提供高质量的视频图像&#xff0c;在较低带宽上提供高质量的图像传输是H.264的应用…

重写Sylar基于协程的服务器(4、协程调度模块的设计)

重写Sylar基于协程的服务器&#xff08;4、协程调度模块的设计&#xff09; 重写Sylar基于协程的服务器系列&#xff1a; 重写Sylar基于协程的服务器&#xff08;0、搭建开发环境以及项目框架 || 下载编译简化版Sylar&#xff09; 重写Sylar基于协程的服务器&#xff08;1、日…

华为机考入门python3--(8)牛客8-合并表记录

分类&#xff1a;字典排序 知识点&#xff1a; 将输入转成int的列表 my_list list(map(int, input().strip().split( ))) 将列表转为元组 tuple(my_list) 访问元素为元组的列表 for first, second, third in my_list: 对字典进行排序 sorted(my_dict.items())…

负载均衡下的webshell上传+nginx解析漏洞

负载均衡下的webshell上传 一&#xff0c;负载均衡下webshell上传的四大难点 难点一&#xff1a;需要在每一台节点的相同位置上传相同内容的webshell 我们需要在每一台节点的相同位置都上传相同内容的 WebShell一旦有一台机器上没有&#xff0c;那么在请求轮到这台机器上的时…

处理SERVLET中的错误

处理SERVLET中的错误 问题陈述 一位用户在使用在线计算机应用程序时输入一个非数字字符做数字加法。servlet试图将用户输入的值转换成整数型时,引发了NumberFormException类型的异常。要创建一个Web应用程序来使用自定义错误页面处理该异常。该自定义错误页面需要向用户提供关…

学习MySQL ENUM数据类型

学习MySQL ENUM数据类型 ENUM是MySQL中的一个字符串对象&#xff0c;它允许从预定义的值列表中选择一个值。这种数据类型特别适用于值的数量有限且不太可能变化的情况。 定义ENUM类型 在定义ENUM类型时&#xff0c;你需要明确列出所有可能的字符串值。例如&#xff1a; CRE…

Linux命令-arpd命令(收集免费ARP信息)

说明 arpd命令 是用来收集免费arp信息的一个守护进程&#xff0c;它将收集到的信息保存在磁盘上或者在需要时&#xff0c; 提供给内核用户用于避免多余广播。 语法 arpd(选项)(参数)选项 -l&#xff1a;将arp数据库输出到标准输出设备显示并退出&#xff1b; -f&#xff1a;指…

【Linux】Ext2 文件系统

文件系统 前言一、磁盘硬件1. 磁盘的物理存储结构2. 磁盘存储的逻辑抽象结构 二、理解 Ext2 文件系统1. 初步理解文件系统2. 深入理解文件系统&#xff08;1&#xff09;inode Table&#xff08;2&#xff09;Data blocks&#xff08;3&#xff09;inode Bitmap&#xff08;4&a…

【Vue】2-9、Vue-CLI 脚手架

一、单页面程序 什么是单页面程序&#xff1f; 单页面程序&#xff08;Single Page Application&#xff09;简称 SPA&#xff0c;顾名思义&#xff0c;指的是一个 Web 网站中只有唯一一个 HTML 页面&#xff0c;所有的功能与交互都在这唯一的一个页面内完成。 二、Vue-CLI …

万能写作辅助器设计

为了构建一个万能写作辅助器,我们需要设计几个关键组件,每个组件都有其特定的功能和交互方式。以下是这些组件的详细设计和描述: 对话生成器(Dialogue Generator) 功能:生成对话内容。输入:可接受拖拽过来的组件,如角色名称、情感标签、场景描述等。管理:能够管理各种…

Golang中的HTTP请求凝聚器

HTTP请求凝聚器是一种请求优化机制&#xff0c;它将多个HTTP请求合并为一个。通过将性质相似的请求归为较大的批次&#xff0c;我们可以减少不必要的网络流量&#xff0c;提高工作效率。 利用goroutines和通道&#xff0c;我们可以在Golang中创建一个HTTP请求凝聚器。goroutine…

【学习笔记】详解换根法(换根DP)

一.换根DP的概念 1.换根DP是什么&#xff1f; 换根DP&#xff0c;又叫二次扫描&#xff0c;是树形DP的一种。 2.换根DP能解决什么问题&#xff1f; 换根DP能解决不指定根结点&#xff0c;并且根节点的变化会对一些值产生影响的问题。例如子结点深度和、点权和等。如果要 暴力…

java社区养老年人服务系统springboot+vue

为了帮助用户更好的了解和理解程序的开发流程与相关内容&#xff0c;本文将通过六个章节进行内容阐述。 第一章&#xff1a;描述了程序的开发背景&#xff0c;程序运用于现实生活的目的与意义&#xff0c;以及程序文档的结构安排信息&#xff1b; 第二章&#xff1a;描述了程序…

代码随想录算法训练营第二十二天|216.组合总和III,17.电话号码的字母组合

系列文章目录 代码随想录算法训练营第一天|数组理论基础&#xff0c;704. 二分查找&#xff0c;27. 移除元素 代码随想录算法训练营第二天|977.有序数组的平方 &#xff0c;209.长度最小的子数组 &#xff0c;59.螺旋矩阵II 代码随想录算法训练营第三天|链表理论基础&#xff…

python Cloudflare 批量关闭IPv6兼容性脚本

Cloudflare免费版控制台不给关IPv6&#xff0c;需要使用API关闭&#xff0c;先从我的个人资料里面申请API令牌&#xff0c;再执行脚本 import requests import jsonheaders {X-Auth-Email:cloudflare登入账户, #输入登入账户的邮箱X-Auth-Key: Global API Key, #输入上图申请…

鸿蒙系统对应安卓版本

鸿蒙系统对应安卓版本 使用安卓studio 新建一个app 然后添加代码打印&#xff1a; Log.d(“MainActivity”, "SDK Version: " Build.VERSION.SDK_INT); 或者把 Build.VERSION.SDK_INT 添加到显示的字符串上面 我这里 build.gradle.kts 配置 android {compileSdk…

MySQL十部曲之七:InnoDB索引及其优化措施

文章目录 前言什么是索引聚集索引和二级索引索引的创建和删除单列和多列索引列前缀索引表达式索引UNIQUE索引 索引优化MySQL是怎样使用索引的优化措施 前言 如果不懂平衡二叉树、B树和B树&#xff08;属于数据结构搜索算法相关内容&#xff09;&#xff0c;那阅读本文意义不大…

rancher迁移账号密码

1. 登陆rancher容器获取user【docker部署和helm部署都一样&#xff0c;进到容器内都是同一路径】 $ kubectl get user NAME AGE u-222ms 82m u-4j5jf 82m u-b4qkhsnliz 139d u-fvj64 83m u-jn58d 84m u-llw8l 83m u-mo773ytt…

数据结构(C语言)代码实现(六)——单链表的实现

目录 参考、格式 头文件LinkList.h 一、将函数的小括号写成中括号 二、读取权限冲突 三、L->Last指针没有移动 四、函数指针的使用 头文件完整代码 测试函数&#xff08;主函数&#xff09;test.cpp 测试结果 参考、格式 数据结构课本2.3节&#xff08;严蔚敏版&a…

SQLite

SQLite语法 大小写敏感性 有个重要的点值得注意&#xff0c;SQLite 是不区分大小写的&#xff0c;但也有一些命令是大小写敏感的&#xff0c;比如 GLOB 和 glob 在 SQLite 的语句中有不同的含义 注释 SQL 注释以两个连续的 "-" 字符&#xff08;ASCII 0x2d&#…