Vue3 watch 使用与注意事项

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

1：reactive监听对象

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2
})watch(
//source() => {console.log('x')return sum.a + sum.b},
//cb(value) => {console.log('执行回调sum:', value)})setTimeout(() => {sum.a++sum.b--console.log('执行定时器了')
}, 1000)</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

分析：组件一开始挂载先执行一次监听中的source，一秒后，因为对sum.a或sum.b操作，所以又执行了一次source，但是source的返回值都没有发生变化，所以都没有执行回调函数(cb)，这样监听只有当sum.a + sum.b返回的值发生变化，才会执行回调函数(cb)

2：reactive监听对象(使用 immediate: true，立即执行一次回调函数（cb）)

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2
})watch(//source() => {console.log('x')return sum.a + sum.b},//cb(value) => {console.log('执行回调sum:', value)},//  立即执行一次回调函数（cb）{immediate: true}
)setTimeout(() => {sum.a++sum.b--console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

3：reactive监听对象(使用 immediate: true，立即执行一次回调函数（cb）)

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2
})watch(//source() => {console.log('x')return sum.a + sum.b},//cb(value) => {console.log('执行回调sum:', value)},// 深度监听{deep: true}
)setTimeout(() => {sum.a++sum.b--console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

分析：为什么加了深度监听后会执行回调？如果你添加了 { deep: true } 选项，即使计算值相同，回调也会执行，这是因为：

1：深度监听的机制：deep: true 会让 Vue 不仅比较计算结果的最终值，还会追踪依赖项的变化

2：依赖项变化：虽然 sum.a + sum.b 的结果没变，但 sum.a 和 sum.b 本身都发生了变化

3：触发条件：深度监听下，只要依赖的响应式数据 (这里是 sum.a 和 sum.b) 发生了变化，就会触发回调，不管计算结果是否相同

如果你希望在依赖项变化时总是执行回调，即使计算结果相同，可以使用 watchEffect：

watchEffect(() => {const value = sum.a + sum.bconsole.log('执行回调sum:', value)
})

或者如果你想保持使用 watch 但总是触发，可以添加 flush: ‘sync’ 选项：

watch(() => sum.a + sum.b,(value) => {console.log('执行回调sum:', value)},{ deep: true, flush: 'sync' }
)

总结:
默认情况下 watch 只在返回值变化时触发
deep: true 会让它追踪依赖项的变化，即使返回值相同也会触发

4：reactive监听对象

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({a: 1,b: 2,c: 3
})watch(//source() => {console.log('x:', sum.c)return sum.a + sum.b},//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.c++console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

分析：一开始先执行source方法所以打印了x:3，又因为一秒后修改了c的值，同时source中对c有监听，所以又执行了一次source，但是因为返回的都是a+b，返回值没有变化，所以不执行回调函数（cb）

5：reactive监听对象

watch(//source() => {console.log('x:', sum.c = 10)  //修改了 `sum.c`，但没有 **读取** 它（不是依赖）return sum.a    // 只有 `sum.a` 被 **读取**，所以 Vue 只监听 `sum.a` 的变化},//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.c++console.log('执行定时器了')
}, 1000)

执行结果如下

在这里插入图片描述

5-1：reactive监听对象

watch(//source() => {console.log('x:', sum.c === 10)  //读取 `sum.c`， **读取** 它（是依赖）return sum.a  // 只有 `sum.a` 被 **读取**，所以 Vue 只监听 `sum.a` 的变化},//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.c++console.log('执行定时器了')
}, 1000

执行结果如下

在这里插入图片描述

总结：如果 getter 函数内部有代码修改了响应式数据（如 sum.c = 10），但 没有读取它，则 Vue 不会 将其视为依赖，因此不会触发重新执行，（sum.c === 10)，读取它，则 Vue 会 将其视为依赖，会触发重新执行

6：在 Vue 3 的 watch API 中，reactive的对象，使用函数返回值 () => sum 和直接使用 sum 作为侦听源（source）有重要区别

6-1：reactive的对象执行结果

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({person: { age: 18, name: '张三' },b: 2,c: 3
})watch(// source() => {console.log('x')return sum},// sum,//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.person.name = '李四'console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

6-2：reactive的对象执行结果

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = reactive({person: { age: 18, name: '张三' },b: 2,c: 3
})watch(// source// () => {//   console.log('x')//   return sum// },sum,//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.person.name = '李四'console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

总结区别：

方式监听目标深度监听适合场景
watch(sum, cb)整个响应式对象自动开启需要深度监听所有变化
watch(() => sum, cb)对象的引用不开启几乎无用（reactive 引用不变）
watch(() => sum.xxx, cb)特定属性不开启精确监听特定属性

7：在 Vue 3 的 watch API 中，ref的对象，使用函数返回值 () => sum 和直接使用 sum 作为侦听源（source）有重要区别

7-1：ref的对象执行结果

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = ref({person: { age: 18, name: '张三' },b: 2,c: 3
})watch(// source// () => {//   console.log('x')//   return sum.value// },sum,//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.value.person.name = '李四'console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

7-2：ref的对象执行结果

<template><div><h1>情况二：watchEffect自动监视数据</h1><h2>两个数字的和：{{ count }}</h2></div>
</template>
<script setup lang="ts" name="DemoWatch">
import { reactive, ref, watch } from 'vue'let count = ref(0)const sum = ref({person: { age: 18, name: '张三' },b: 2,c: 3
})watch(// source() => {console.log('x')return sum.value},// sum,//cb(value) => {console.log('执行回调sum:', value)}
)setTimeout(() => {sum.value.person.name = '李四'console.log('执行定时器了')
}, 1000)
</script>
<style scoped></style>

执行结果如下

在这里插入图片描述

总结区别：

监听方式触发条件深度监听适用场景
watch(sum, cb)仅 sum.value = newObj 时触发❌监听整个 ref 替换
watch(sum.value, cb)同理成reactive深度监听嵌套变化（不推荐）✅不推荐（可能丢失响应性）
watch(() => sum.value, cb, { deep: true })深度监听嵌套变化✅推荐（清晰且可控）
watch(() => sum.value.xxx, cb)仅监听特定属性❌精确监听，性能优化

注意：如果使用ref包裹的对象，使用ref.value得到后是一个代理，就同理成reactive

在这里插入图片描述

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

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

相关文章

医学写作供应商管理全流程优化

医学写作供应商管理全流程优化

1. 供应商筛选与评估 1.1 资质审核 1.1.1 行业认证核查 核查供应商的行业认证，如AMWA医学写作认证、EMWA会员资格、ISO 9001等，确保其专业资质。 1.1.2 团队背景评估 评估团队成员专业背景，包括医学/药学学位、临床试验经验、发表记录，保障专业能力。 1.1.3 国际规范熟悉…
阅读更多...
固态硬盘颗粒类型、选型与应用场景深度解析

固态硬盘颗粒类型、选型与应用场景深度解析

一、固态硬盘颗粒类型的技术演进与特性 固态硬盘&#xff08;SSD&#xff09;的性能核心在于存储单元结构的设计&#xff0c;这种设计直接决定了数据的存储密度、读写速度、耐久度及成本效益。当前主流的闪存颗粒类型呈现从单层到多层架构的梯度演进&#xff0c;其技术特征与应…
阅读更多...
CAPL自动化-诊断Demo工程

CAPL自动化-诊断Demo工程

文章目录 前言一、诊断控制面板二、诊断定义三、发送诊断通过类.方法的方式req.SetParameterdiagSetParameter四、SendRequestAndWaitForResponse前言 本文将介绍CANoe的诊断自动化测试，工程可以从CANoe的 Sample Configruration 界面打开，也可以参考下面的路径中打开（以实…
阅读更多...
嵌入式预处理链接脚本lds和map文件

嵌入式预处理链接脚本lds和map文件

在嵌入式开发中&#xff0c;.lds.S 文件是一个 预处理后的链接脚本&#xff08;Linker Script&#xff09;&#xff0c;它结合了 C 预处理器&#xff08;Preprocessor&#xff09; 的功能和链接脚本的语法。它的核心作用仍然是 定义内存布局和链接规则&#xff0c;但通过预处理…
阅读更多...
PT5F2307触摸A/D型8-Bit MCU

PT5F2307触摸A/D型8-Bit MCU

1. 产品概述 ● PT5F2307是一款51内核的触控A/D型8位MCU&#xff0c;内置16K*8bit FLASH、内部256*8bit SRAM、外部512*8bit SRAM、触控检测、12位高精度ADC、RTC、PWM等功能&#xff0c;抗干扰能力强&#xff0c;适用于滑条遥控器、智能门锁、消费类电子产品等电子应用领域。 …
阅读更多...
RabbitMQ——消息确认

RabbitMQ——消息确认

一、消息确认机制 生产者发送的消息&#xff0c;可能有以下两种情况&#xff1a; 1> 消息消费成功 2> 消息消费失败 为了保证消息可靠的到达消费者&#xff08;&#xff01;&#xff01;&#xff01;注意&#xff1a;消息确认机制和前面的工作模式中的publisher confi…
阅读更多...
C++异步(1)

C++异步(1)

什么是异步? 异步就是多个线程是同时执行的&#xff0c;与之相对的就是线程同步&#xff0c;二者都应用在并发的场景上。 异步的特点 异步执行的任务无需等待其他任务完成&#xff0c;其本身是通过非阻塞的方式执行的&#xff0c;不依赖前驱任务&#xff0c;通常用于IO密集…
阅读更多...
向量数据库Milvus03-高级功能与性能调优

向量数据库Milvus03-高级功能与性能调优

Milvus高级功能与性能调优 目录 高级特性详解性能调优技巧生产环境部署最佳实践总结与展望 1. 高级特性详解 1.1 多索引兼容 Milvus 支持多种索引类型&#xff08;如 HNSW、IVF_PQ、IVF_FLAT&#xff09;的混合使用&#xff0c;以适应不同场景的需求。 HNSW&#xff08;Hier…
阅读更多...
5月24日day35打卡

5月24日day35打卡

模型可视化与推理 知识点回顾&#xff1a; 三种不同的模型可视化方法&#xff1a;推荐torchinfo打印summary权重分布可视化进度条功能&#xff1a;手动和自动写法&#xff0c;让打印结果更加美观推理的写法&#xff1a;评估模式 作业&#xff1a;调整模型定义时的超参数&#x…
阅读更多...
野火鲁班猫(arrch64架构debian)从零实现用MobileFaceNet算法进行实时人脸识别（三）用yolov5-face算法实现人脸检测

野火鲁班猫(arrch64架构debian)从零实现用MobileFaceNet算法进行实时人脸识别（三）用yolov5-face算法实现人脸检测

环境直接使用第一篇中安装好的环境即可 先clone yolov5-face项目 git clone https://github.com/deepcam-cn/yolov5-face.git 并下载预训练权重文件yolov5n-face.pt 网盘链接: https://pan.baidu.com/s/1xsYns6cyB84aPDgXB7sNDQ 提取码: lw9j &#xff08;野火官方提供&am…
阅读更多...
R语言科研编程-柱状图

R语言科研编程-柱状图

R语言简介 R语言是一种开源的统计计算和图形绘制编程语言&#xff0c;广泛应用于数据分析、机器学习、数据可视化等领域。它由Ross Ihaka和Robert Gentleman于1993年开发&#xff0c;具有丰富的统计函数库和图形功能&#xff0c;尤其适合数据科学研究和可视化任务。 使用R语言…
阅读更多...
Android-Handler学习总结

Android-Handler学习总结

​​面试官​&#xff1a;你好&#xff01;我看你简历里提到熟悉 Android 的 Handler 机制&#xff0c;能简单说一下它的作用吗&#xff1f; ​候选人​&#xff1a; Handler 是 Android 中用来做线程间通信的工具。比如Android 应用的 UI 线程&#xff08;也叫主线程…
阅读更多...
【iOS】分类、扩展、关联对象

【iOS】分类、扩展、关联对象

分类、扩展、关联对象 前言分类扩展扩展和分类的区别关联对象key的几种用法流程 总结 前言 最近的学习中笔者发现自己对于分类、扩展相关知识并不是很熟悉&#xff0c;刚好看源码类的加载过程中发现有类扩展与关联对象详解。本篇我们来探索一下这部分相关知识&#xff0c;首先…
阅读更多...
30.第二阶段x64游戏实战-认识网络数据包发送流程

30.第二阶段x64游戏实战-认识网络数据包发送流程

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;图灵Python学院 上一个内容&#xff1a;29.第二阶段x64游戏实战-技能冷却 发送数据包的方式&#xff08;函数&#xff09;操作系统提供…
阅读更多...
【每日一题】【前缀和优化】【前/后缀最值】牛客练习赛139 B/C题 大卫的密码 (Hard Version) C++

【每日一题】【前缀和优化】【前/后缀最值】牛客练习赛139 B/C题 大卫的密码 (Hard Version) C++

牛客练习赛139 B题 大卫的密码 (Easy Version) 牛客练习赛139 C题 大卫的密码 (Hard Version) 大卫的密码 题目背景 牛客练习赛139 题目描述 给定一个 n m n\times m nm的网格图&#xff0c;我们使用 ( i , j ) (i,j) (i,j)表示网格中从上往下数第 i i i行和从左往右数第…
阅读更多...
文件夹图像批处理教程

文件夹图像批处理教程

前言 因为经常对图像要做数据清洗&#xff0c;又很费时间去重新写一个&#xff0c;我一直在想能不能写一个通用的脚本或者制作一个可视化的界面对文件夹图像做批量的修改图像大小、重命名、划分数据训练和验证集等等。这里我先介绍一下我因为写过的一些脚本&#xff0c;然后我…
阅读更多...
【Unity实战笔记】第二十四 · 使用 SMB+Animator 实现基础战斗系统

【Unity实战笔记】第二十四 · 使用 SMB+Animator 实现基础战斗系统

转载请注明出处&#xff1a;&#x1f517;https://blog.csdn.net/weixin_44013533/article/details/146409453 作者&#xff1a;CSDN|Ringleader| 1 结构 1.1 状态机 1.2 SMB 2 代码实现 2.1 核心控制 Player_Base_SMB 继承 StateMachineBehaviour &#xff0c;控制变量初始…
阅读更多...
Python虚拟环境再PyCharm中自由切换使用方法

Python虚拟环境再PyCharm中自由切换使用方法

Python开发中的环境隔离是必不可少的步骤，通过使用虚拟环境可以有效地管理不同项目间的依赖，避免包冲突和环境污染。虚拟环境是Python官方提供的一种独立运行环境，每个项目可以拥有自己单独的环境，不同项目之间的环境互不影响。在日常开发中，结合PyCharm这样强大的IDE进行…
阅读更多...
大模型智能体入门扫盲——基于camel的概述

大模型智能体入门扫盲——基于camel的概述

前言 本篇博客想带读者进行一个智能体入门扫盲&#xff0c;了解基础知识&#xff0c;为什么用camel呢&#xff0c;因为小洛发现它们文档对这种智能体的基本组件介绍得很全面深入。 基础概念 agent 一个典型的agent智能体包含三个核心部分&#xff1a; 感知模块&#xff1…
阅读更多...
目标检测 RT-DETR（2023）详细解读

目标检测 RT-DETR（2023）详细解读

文章目录 主干网络&#xff1a;Encoder&#xff1a;不确定性最小Query选择Decoder网络&#xff1a; 将DETR扩展到实时场景&#xff0c;提高了模型的检测速度。网络架构分为三部分组成&#xff1a;主干网络、混合编码器、带有辅助预测头的变换器编码器。具体来说&#xff0c;先利…
阅读更多...
最新文章

Copyright @ 2022~2023