vue3中watch侦听器的使用

侦听器（watch）是vue的核心语法之一，用于监听数据的变化情况。在写项目时经常会遇到，但经常忘记，重新学习了一下尚硅谷的vue3视频，记录一下最新的用法情况

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值（getter函数）。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

* 情况一

监视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>

* 情况二

监视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>

* 情况三

监视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>

* 情况四

监视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>

* 情况五

监视上述的多个数据

<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>

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

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

相关文章

Vue3 中的代理原理详解

Vue3 中的代理原理详解

Vue3 中的代理原理详解 Vue3 中引入了代理&#xff08;Proxy&#xff09;机制&#xff0c;取代了 Vue2 中的 Object.defineProperty() 机制&#xff0c;用于实现数据响应式。代理机制是 ES6 中新增的特性&#xff0c;它可以用来自定义对象中的操作&#xff0c;比如属性查找、赋…
阅读更多...
基础算法|线性结构|前缀和学习

基础算法|线性结构|前缀和学习

参考文章&#xff1a; https://blog.csdn.net/weixin_72060925/article/details/127835303 二维数组的前缀和练习&#xff1a; 这里要注意的地方就是求子矩阵和的时候&#xff0c;这里要减去的是x1-1&#xff0c;y1-1的部分&#xff0c;因为所求的目标值是包括边界的 //前缀…
阅读更多...
【代码随想录python笔记整理】第十七课 · 判断集合成员

【代码随想录python笔记整理】第十七课 · 判断集合成员

前言:本笔记仅仅只是对内容的整理和自行消化&#xff0c;并不是完整内容&#xff0c;如有侵权&#xff0c;联系立删。 一、集合 在之前提到&#xff0c;哈希表主要是用来判断给定的整数是否存在于给定的数据中。而在上一节中我们使用了数组&#xff0c;通过索引来实现哈希表的功…
阅读更多...
备战蓝桥（模板篇）

备战蓝桥（模板篇）

扩展欧德里几算法 质数筛 分解质因数 LCA BFS floyd Dijkstra prime 日期是否合法 Tire异或 模拟散列表 字符哈希 Tire字符串统计
阅读更多...
【C++】学习记录

【C++】学习记录

一、第一个C程序 #include<iostream> using namespace std;int main() {cout << "Hello World!";return 0; } 二、数据类型、变量与常量、运算符 2.1 数据类型 2.2 变量与常量 2.3 运算符 三 、判断语句&#xff08;if-else、switch-case&#xff09; …
阅读更多...
LeetCode(力扣)算法题_2575_找出字符串的可除整数组

LeetCode(力扣)算法题_2575_找出字符串的可除整数组

找出字符串的可除整数组 题目描述 难度&#xff1a;中等 给你一个下标从 0 开始的字符串 word &#xff0c;长度为 n &#xff0c;由从 0 到 9 的数字组成。另给你一个正整数 m 。 word 的 可整除数组 div 是一个长度为 n 的整数数组&#xff0c;并满足&#xff1a; 如果…
阅读更多...
淘宝/天猫API：电商卖家提升销售额的利器

淘宝/天猫API：电商卖家提升销售额的利器

淘宝/天猫API对于电商卖家来说确实是一个提升销售额的利器。通过使用这些API&#xff0c;卖家可以自动化和优化各种业务流程&#xff0c;从而提高销售效率、优化客户体验并增强竞争力。以下是一些建议和示例代码&#xff0c;说明如何利用淘宝/天猫API来提升销售额。 1. 获取商…
阅读更多...
从0到1入门C++编程——10 stack容器、queue容器、list容器、set容器、map容器

从0到1入门C++编程——10 stack容器、queue容器、list容器、set容器、map容器

文章目录 一、stack容器二、queue容器三、list容器1、构造函数2、赋值和交换3、大小及判空4、插入和删除5、数据存取6、反转和排序7、排序案例 四、set/multiset容器1、构造和赋值2、大小和交换3、插入和删除4、查找和统计5、set和multiset的区别6、pair对组的创建7、排序及规则…
阅读更多...
边缘计算基础知识

边缘计算基础知识

目录 边缘计算简介任务卸载简介边缘存储系统 边缘计算简介 边缘计算是指利用靠近数据生成的网络边缘侧的设备&#xff08;如移动设备、基站、边缘服务器、边缘云等&#xff09;的计算能力和存储能力&#xff0c;使得数据和任务能够就近得到处理和执行。 一个典型的边缘计算系…
阅读更多...
泽众云真机-为什么老机型专区大部分是维护中？如何解决

泽众云真机-为什么老机型专区大部分是维护中？如何解决

最近&#xff0c;泽众云真机平台有几位用户向我们咨询&#xff0c;为什么老机型专区大部分是维护中&#xff1f;我想使用这些机型怎么办&#xff1f; 首先来解释一下&#xff0c;为什么叫“老机型专区”&#xff1f;因为一些老的机型之前一直是在线状态&#xff0c;通过我们长期…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Checkbox）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Checkbox）

提供多选框组件&#xff0c;通常用于某选项的打开或关闭。 说明&#xff1a; API version 11开始&#xff0c;Checkbox默认样式由圆角方形变为圆形。 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 无 接口…
阅读更多...
Hello C++ （c++是什么/c++怎么学/c++推荐书籍）

Hello C++ （c++是什么/c++怎么学/c++推荐书籍）

引言 其实C基础语法基本上已经学完&#xff0c;早就想开始写C的博客了&#xff0c;却因为其他各种事情一直没开始。原计划是想讲Linux系统虚拟机安装的&#xff0c;后来考虑了一下还是算了&#xff0c;等Linux学到一定程度再开始相关博客的写作和发表吧。今天写博客想给C开个头…
阅读更多...
解决：ModuleNotFoundError: No module named ‘paddle‘

解决：ModuleNotFoundError: No module named ‘paddle‘

错误显示&#xff1a; 原因&#xff1a; 环境中没有‘paddle’的python模块&#xff0c;但是您在尝试导入 解决方法&#xff1a; 1.普通方式安装&#xff1a; pip install paddlepaddle #安装命令 2.镜像源安装 pip install paddlepaddle -i https://pypi.tuna.tsinghua.e…
阅读更多...
饮料换购 刷题笔记

饮料换购 刷题笔记

直接开个计数器mask 每当饮料现存数-1&#xff1b; cnt;且mask; 一旦mask达到3 饮料现存数 计数器清零3 代码 #include <iostream> #include<cstdio> #include<algorithm> #include<cstring> using namespace std; int main(){ int n; …
阅读更多...
【论文整理】自动驾驶场景中Collaborative Methods多智能体协同感知文章创新点整理

【论文整理】自动驾驶场景中Collaborative Methods多智能体协同感知文章创新点整理

Collaborative Methods F-CooperV2VNetWhen2commDiscoNetAttFusionV2X-ViTCRCNetCoBERTWhere2commDouble-MCoCa3D 这篇文章主要想整理一下&#xff0c;根据时间顺序这些文章是怎么说明自己的创新点的&#xff0c;又是怎么说明自己的文章比别的文章优越的。显然似乎很多文章只是…
阅读更多...
网络编程：数据库实现增删改

网络编程：数据库实现增删改

1.数据库实现增删改 程序代码&#xff1a; 1 #include<myhead.h>2 //定义添加数据函数3 int do_add(sqlite3*ppDb)4 {5 //准备sql语句6 int add_numb;//工号7 char add_name[20];//姓名8 double add_salary;9 printf("请输入要添加的工号:&quo…
阅读更多...
18-Java迭代器模式 ( Iterator Pattern )

18-Java迭代器模式 ( Iterator Pattern )

Java迭代器模式 摘要实现范例 迭代器模式&#xff08;Iterator Pattern&#xff09;用于顺序访问集合对象的元素&#xff0c;不需要知道集合对象的底层表示 迭代器模式是 Java 和 .Net 编程环境中非常常用的设计模式 迭代器模式属于行为型模式 摘要 1. 意图 提供一种方法…
阅读更多...
sql server使用逗号,分隔保存多个id的一些查询保存

sql server使用逗号,分隔保存多个id的一些查询保存

方案一&#xff0c;前后不附加逗号&#xff1a; 方案二&#xff0c;前后附加逗号&#xff1a; 其他保存方案&#xff1a; &#xff08;这里是我做一个程序的商家日期规则搞得&#xff0c;后面再补具体操作&#xff09;&#xff1a; 1,2,3 | 1,2,3 | 1,2,3; 1,2,3 &#xff1…
阅读更多...
Unity性能优化篇(十二) 音频优化之导入音频后的属性设置

Unity性能优化篇(十二) 音频优化之导入音频后的属性设置

Unity支持后缀为.wav、.ogg、.mp3的音频文件&#xff0c;但建议使用.wav&#xff0c;因为Unity对它的支持特别好。 注意&#xff1a;Unity在构建项目时总是会自动重新压缩音频文件&#xff0c;因此无需刻意提前压缩一个音频文件再导入Unity&#xff0c;因为这样只会降低该音频文…
阅读更多...
openGauss gsql 常用元命令 二

openGauss gsql 常用元命令 二

openGauss gsql 常用元命令 二 \df 查看当前数据库函数信息 openGauss# \df ********* QUERY ********** SELECT n.nspname as "Schema",p.proname as "Name",pg_catalog.pg_get_function_result(p.oid) as "Result data type",pg_catalog.pg_…
阅读更多...
最新文章

Copyright @ 2022~2023