Vue3-watch监听ref和reactive数据的五种情况及watchEffect

何为watch：

        文档定义：

用于声明在数据更改时调用的侦听回调。

watch 选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性 (例如，通过 data 或 computed 声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。

除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如 a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的 $watch() API。

值也可以是一个方法名称的字符串 (通过 methods 声明)，或包含额外选项的对象。当使用对象语法时，回调函数应被声明在 handler 中。额外的选项包含：

  • immediate：在侦听器创建时立即触发回调。第一次调用时，旧值将为 undefined。
  • deep：如果源是对象或数组，则强制深度遍历源，以便在深度变更时触发回调。详见深层侦听器。
  • flush：调整回调的刷新时机。详见回调的触发时机及 watchEffect()。
  • onTrack / onTrigger：调试侦听器的依赖关系。详见侦听器调试。

声明侦听器回调时避免使用箭头函数，因为它们将无法通过 this 访问组件实例。

概述：

  • 作用：监视数据的变化（和Vue2中的watch作用一致）

  • 特点：Vue3中的watch只能监视以下四种数据：

  1. ref定义的数据。

  2. reactive定义的数据。

  3. 函数返回一个值（getter函数）。

  4. 一个包含上述内容的数组。

情况1：

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

<template><div class="person"><h1>情况一：监视【ref】定义的【基本类型】数据</h1><h2>当前求和为：{{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let sum = ref(0)// 方法function changeSum(){sum.value += 1}// 监视，情况一：监视【ref】定义的【基本类型】数据const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()}})
</script>

情况2：

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<template><div class="person"><h1>情况二：监视【ref】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let person = ref({name:'张三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}/* 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视watch的第一个参数是：被监视的数据watch的第二个参数是：监视的回调watch的第三个参数是：配置对象（deep、immediate等等.....） */watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})</script>

情况3：

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

<template><div class="person"><h1>情况三：监视【reactive】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button><hr><h2>测试：{{obj.a.b.c}}</h2><button @click="test">修改obj.a.b.c</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18})let obj = reactive({a:{b:{c:666}}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function test(){obj.a.b.c = 888}// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj变化了',newValue,oldValue)})
</script>

情况4：

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

  1. 若该属性值不是【对象类型】，需要写成函数形式。

  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template><div class="person"><h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name变化了',newValue,oldValue)}) */// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
</script>

情况5：

监视上述的多个数据

<template><div class="person"><h1>情况五：监视上述的多个数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况五：监视上述的多个数据watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})</script>

注意：

监听过程中由于浅拷贝和深拷贝的原因可能会出现newvalue和oldvalue相同的情况。

通过深拷贝（以扩展运算符为例），解决newValue与 oldValue值相同问题


const refData = ref(['a','b','c'])
watch(() => [...refData.value],(newValue, oldValue) => {console.log(newValue, oldValue)},{ deep: true }
)

watchEffect:

  • 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

<template><div class="person"><h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1><h2 id="demo">水温：{{temp}}</h2><h2>水位：{{height}}</h2><button @click="changePrice">水温+1</button><button @click="changeSum">水位+10</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'// 数据let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}// 用watch实现，需要明确的指出要监视：temp、heightwatch([temp,height],(value)=>{// 从value中获取最新的temp值、height值const [newTemp,newHeight] = value// 室温达到50℃，或水位达到20cm，立刻联系服务器if(newTemp >= 50 || newHeight >= 20){console.log('联系服务器')}})// 用watchEffect实现，不用const stopWtach = watchEffect(()=>{// 室温达到50℃，或水位达到20cm，立刻联系服务器if(temp.value >= 50 || height.value >= 20){console.log(document.getElementById('demo')?.innerText)console.log('联系服务器')}// 水温达到100，或水位达到50，取消监视if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}})
</script>

有点组件的全局引入和精确引入的感觉。

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

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

相关文章

Word2021中的The Mathtype DLL cannot be found问题解决（office 16+mathtype7+非初次安装）

Word2021中的The Mathtype DLL cannot be found问题解决（office 16+mathtype7+非初次安装）

问题描述&#xff0c;我的问题发生在word中无法使用自定义功能区中的mathtype 我的环境是&#xff1a;W11Word2021mathtype7 因为我是第二次安装mathtype7&#xff0c;所以我怀疑是因为没有卸载干净&#xff0c;于是我参考了下面这篇文章的做法 参考文章 1.首先重新卸载当前的…
阅读更多...
Go语言学习记录

Go语言学习记录

GO语法学习之路 学习时间段2024-06-02学习记录安装&环境配置Go安装包内容统一入门姿势&#xff1a;hello world实现 Go语法初学Go 运行时&#xff08;runtime&#xff09;Go解释器 学习时间段 #mermaid-svg-tTuVZ3bbdJvu04kX {font-family:"trebuchet ms",verdan…
阅读更多...
百度大模型算法实习岗上岸经验分享！

百度大模型算法实习岗上岸经验分享！

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学. 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总合集&…
阅读更多...
算法学习（01）

算法学习（01）

1、排序算法 1&#xff09;快速排序 public void qsout(int[] arr,int l,int r){if(l > r)return;int i,j,temp,t;i l;j r;temp arr[l];while(i ! j){while(arr[j] > temp && i < j) j--;while(arr[i] < temp && i < j) i;if(i < j){t …
阅读更多...
每日一练——分糖果

每日一练——分糖果

575. 分糖果 - 力扣&#xff08;LeetCode&#xff09; 方法一 可以做&#xff0c;但提示超时了 #define MIN(x, y) (x < y ? x : y)int distributeCandies(int* candyType, int candyTypeSize) {int p 0;char flag 1;for (int i 1; i < candyTypeSize; i){for (int…
阅读更多...
TypeScript 模块解析机制

TypeScript 模块解析机制

1. 模块解析的概念 模块解析是指编译器在编译过程中根据模块的导入语句找到并加载相应的模块文件的过程。在 TypeScript 中&#xff0c;模块可以使用相对路径或者绝对路径来导入&#xff0c;编译器需要根据导入语句中的路径信息来定位到对应的模块文件。 2. 解析策略 TypeSc…
阅读更多...
Java项目：94 springboot大学城水电管理系统

Java项目：94 springboot大学城水电管理系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本管理系统有管理员和用户。 本大学城水电管理系统管理员功能有个人中心&#xff0c;用户管理&#xff0c;领用设备管理&#xff0c;消耗设备…
阅读更多...
pandas习题 035：选择 DataFrame 其中一列

pandas习题 035：选择 DataFrame 其中一列

# 有以下一个 DataFrame&#xff0c;请分别选择 name 列和 math 列&#xff0c;选择后为一个 Series&#xff0c;并查看这些 Series 的数据类型。 import pandas as pddata {name: [Alice, Bob, Charlie, David, Eve],grade: [10, 11, 10, 12, 11],math: [90, 85, 92, 88, 95]…
阅读更多...
介绍计算机系统中的I/O设备工作方式

介绍计算机系统中的I/O设备工作方式

在现代计算机系统中&#xff0c;I/O设备&#xff08;Input/Output Devices&#xff09;扮演着至关重要的角色&#xff0c;它们负责在计算机和外部环境之间进行数据交换。本文将详细介绍I/O设备的种类、连接方式及其工作原理&#xff0c;并解释GPU如何进行并行计算&#xff0c;以…
阅读更多...
Lambda 表达式练习

Lambda 表达式练习

目录 sorted() 四种排序 List 转 Map map 映射 对象中 String 类型属性为空的字段赋值为 null BiConsumer,> T reduce(T identity, BinaryOperator accumulator) allMatch(Predicate p) groupingBy(Function f) flatMap(Function f) Optional.ofNullable(T t) 和 …
阅读更多...
基于51单片机的俄罗斯方块

基于51单片机的俄罗斯方块

一.硬件方案 本设计采用STC89C52RC单片机作为系统的芯片&#xff0c;实现人机交互、娱乐等功能。选用LCD12864实现俄罗斯方块游戏界面、图形显示&#xff1b;选用独立按键实现游戏控制。本设计实现的基本功能是&#xff1a;用按键控制目标方块的变换与移动&#xff1b;消除一行…
阅读更多...
OpenCASCADE开发指南＜十四＞：OCCT建模类之BRepPrimAPI_MakePipe创建管道

OpenCASCADE开发指南＜十四＞：OCCT建模类之BRepPrimAPI_MakePipe创建管道

1、OpenCasCade拓扑几何 在Open CASCADE Technology (OCCT) 中，除了基本三维几何体建模类BRepBuilderAPI外，还提供了复杂模型的建模类，常用的有如下几种，他们可以单独使用或相互组合，通过OCCT提供的融合函数进行组装。例如：BRepOffsetAPI_ThruSections、BRepOffsetAPI_Ma…
阅读更多...
TalkingData数据统计：洞察数字世界的关键工具

TalkingData数据统计：洞察数字世界的关键工具

TalkingData数据统计&#xff1a;洞察数字世界的关键工具 在数字化时代&#xff0c;数据已成为推动社会进步和商业决策的核心动力。TalkingData作为国内领先的移动数据服务平台&#xff0c;为众多企业提供了全面、精准的数据统计服务。本文将深入探讨TalkingData数据统计的应用…
阅读更多...
Jenkins - Parallel 并行执行

Jenkins - Parallel 并行执行

Jenkins - Parallel 并行执行 引言Jenkins Parallel 基本用法Jenkins Prallel 启动多个其他 JobJenkins Parallel Retry 引言 日常执行测试用例&#xff0c;为了缩减执行时间&#xff0c;提高工作效率&#xff0c;可以从以下两个方面进行改进。 代码层面&#xff1a;用多进程…
阅读更多...
15 试用期，转正时我们要考察什么？

15 试用期，转正时我们要考察什么？

上一讲&#xff0c;我点出了“找人并不等于盲目加人”&#xff0c;你既要明确业务现状与团队需求&#xff0c;更要做好面试甄别&#xff0c;做出最优决定。那么当你找到人之后&#xff0c;是不是就可以高枕无忧了呢&#xff1f;并不是。 因为最终目的并非招聘&#xff0c;而是…
阅读更多...
基于安卓的虫害识别软件设计--（2）模型性能可视化|混淆矩阵、热力图

基于安卓的虫害识别软件设计--（2）模型性能可视化|混淆矩阵、热力图

1.混淆矩阵&#xff08;Confusion Matrix&#xff09; 1.1基础理论 &#xff08;1&#xff09;在机器学习、深度学习领域中&#xff0c;混淆矩阵常用于监督学习&#xff0c;匹配矩阵常用于无监督学习。主要用来比较分类结果和实际预测值。 &#xff08;2&#xff09;图中表达…
阅读更多...
FPGA代码移植案例分析：Tcl Scripts后提示找不到 vo 文件，Supra软件报错

FPGA代码移植案例分析：Tcl Scripts后提示找不到 vo 文件，Supra软件报错

FPGA代码移植案例分析&#xff1a;Tcl Scripts后提示找不到 vo 文件&#xff0c;Supra软件报错 客户工程师已经运行Tcl Scripts&#xff0c;正常没出错就会产生这个vo文件。工程师试了两次 运行之后点的next的&#xff0c;还是出现同样的错误。 建议客户在原quartus工程里重新…
阅读更多...
LabVIEW如何确保步进电机的长期稳定运行

LabVIEW如何确保步进电机的长期稳定运行

步进电机因其良好的定位精度和控制性&#xff0c;在自动化设备中得到了广泛应用。然而&#xff0c;长期稳定运行对于任何电机系统都是一个重要的挑战。LabVIEW作为一款强大的图形化编程语言&#xff0c;通过其灵活的控制算法和实时监控能力&#xff0c;为步进电机的稳定运行提供…
阅读更多...
探索 Vue Devtools 4.0 的新世界！

探索 Vue Devtools 4.0 的新世界！

大家好&#xff0c;我是前端宝哥。Vue Devtools 4.0 版本带来了一系列激动人心的新特性和改进&#xff0c;让我们一起来探索这些更新亮点&#xff01; 宝哥省流版&#xff1a; &#x1f6e0; 直接编辑组件数据&#xff0c;实时预览变更效果。⚙️ 快速编辑功能&#xff0c;一键…
阅读更多...
Python 基于机器学习模型的车牌检测和识别系统 有GUI界面 【含Python源码 MX_004期】

Python 基于机器学习模型的车牌检测和识别系统 有GUI界面 【含Python源码 MX_004期】

一、系统介绍 车牌的检测和识别技术在现代社会中的应用场景可谓十分广泛&#xff0c;不仅涉及交通管理领域&#xff0c;还延伸至社区安保等多个方面。例如&#xff0c;在交通违章管理中&#xff0c;通过车牌追踪可以有效追踪违章车辆&#xff0c;维护交通秩序&#xff1b;在小区…
阅读更多...
最新文章

Copyright @ 2022~2023