【vue3】wacth监听，监听ref定义的数据，监听reactive定义的数据，详解踩坑点

假期第二篇，对于基础的知识点，我感觉自己还是很薄弱的。
趁着假期，再去复习一遍

之前已经记录了一篇【vue3基础知识点-computed和watch】
今天在学习的过程中发现，之前记录的这一篇果然是很基础的，很多东西都讲的不够细致

话不多说，进入正题：

vue2

vue2中的watch写法，（vue3可以向下兼容vue2的写法）

<template><div><h1>当前求和为：{{sum}}</h1><button @click="sum++">点我+1</button></div>
</template><script >import { ref, watch } from 'vue';
export default {
name:'demo',
watch: {// vue2简单写法sum(newVal, oldVal) {console.log('sum的值变化了', newVal, oldVal);}//vue2完整写法sum:{handler(newVal,oldval){console.log('sum的值变化了', newVal, oldVal);},deep:true,immediate:true}
},
setup(){let sum = ref(0)return {sum}
}
}</script>

在这里插入图片描述
虽然vue3中可以使用vue2的写法，但是混合使用会导致代码风格不一致，增加维护成本。而且我们只是习惯了vue2的写法，全都使用vue3的写法，其实就是一个熟悉的过程，vue3 的 < script setup> 语法和 Composition API组合式api还是很香的，慢慢来吧

组合式api其实就是一堆内置的函数，需要用什么就引入对应的函数，如ref、wacth等

vue3

1、监听ref定义的单个响应式数据

<template><div><h1>当前求和为：{{sum}}</h1><button @click="sum++">点我+1</button></div>
</template>
<script >
import { ref, watch } from 'vue';
export default {
name:'demo',
setup(){let sum = ref(0)//第一个参数，要监听的数据//第二个参数，回调函数，两种写法：箭头函数或者普通函数都可以//（在vue3中，wathc的回调函数可以写成箭头函数，因为setup中this是undefined，没有响应式的this上下文）//箭头函数写法watch(sum,(newVal,oldval)=>{console.log('sum变了',newVal,oldval)unde})// 普通函数写法watch(sum,function(newVal,oldval){console.log('sum变了',newVal,oldval)})return {sum}
}}

2、监听ref定义的多个响应式数据

<template><div><h1>当前求和为：{{sum}}</h1><button @click="sum++">点我+1</button><h2>当前招呼语：{{msg}}</h2><button @click="msg+='wow'">点我打招呼</button></div>
</template>
<script >
import { ref, watch } from 'vue';
export default {
name:'demo',
setup(){let sum = ref(0)let msg = ref('hello')
//vue2中watch是配置项，只能写一个；vue3中watch是函数，可以调用n次
watch(sum,(newVal,oldVal)=>{console.log('sum变了',newVal,oldVal);
})
watch(msg,(newVal,oldVal)=>{console.log('msg',newVal,oldVal);
})return {sum,msg}
}
}
</script>

这种写法虽然可以多次调用watch函数，但是还有更简化的写法

<template><div><h1>当前求和为：{{ sum }}</h1><button @click="sum++">点我+1</button><h2>当前招呼语：{{ msg }}</h2><button @click="msg += 'wow'">点我打招呼</button></div>
</template>
<script >
import { ref, watch } from "vue";
export default {name: "demo",setup() {let sum = ref(0);let msg = ref("hello");
//第一个参数为数组，第二个参数为回调函数watch([sum, msg], (newVal, oldVal) => {console.log("sum或msg变了", newVal, oldVal);});return {sum,msg,};},
};
</script>

在这里插入图片描述
在这里插入图片描述
vue3 watch中的参数，第三个就是配置项

注意点：监听ref定义的数据不需要写deep：true，简单数据类型不需要深度监听，ref定义的对象，本质上还是调用了reactive将其包装成响应式对象，所以ref定义的对象默认开启了深度监听

watch(source: WatchSource, cb: WatchCallback, options?: WatchOptions): StopHandle
source: 监听的源（可以是响应式数据、计算属性或ref等）
cb: 当源发生变化时被调用的回调函数
options（可选）: 一个对象，包含额外的选项配置
返回一个停止监听的函数

    let sum = ref(0);let msg = ref("hello");//监听单个watch(sum, (newVal, oldVal) => {console.log("sum变了", newVal, oldVal);},{immediate:true});//监听多个watch([sum, msg], (newVal, oldVal) => {console.log("sum或msg变了", newVal, oldVal);},{immediate:true});

3、监听reactive定义的单个响应式数据的全部属性

<template><div>
<h2>姓名：{{person.name}}</h2>
<h2>性别：{{person.sex}}</h2>
<button @click="person.name+='~'">姓名变了</button><button  @click="person.sex+='！'">性别变了</button></div>
</template>
<script >
import {reactive,watch } from "vue";
export default {name: "demo",setup() {let person = reactive({name:'莲花',sex:'男'})watch(person, (newVal, oldVal) => {console.log("person变了", newVal, oldVal);});return {person};},
};
</script>

这有个踩坑点，recative定义的响应式数据，交给watch进行监听，此处无法正确的获得oldValue，watch默认只能追踪到响应式数据属性的变化，但并不会记录变化前的旧值
在这里插入图片描述
如果reactive定义的数据嵌套很深，在vue2中需要开启深度监听才能监听到，但是vue3中却不需要

<template><div>
<h2>姓名：{{person.name}}</h2>
<h2>性别：{{person.sex}}</h2>
<h2>工作：{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button></div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {name: "demo",setup() {let person = reactive({name:'莲花',sex:'男',job:{job1:{work:'侦探'}}      })watch(person, (newVal, oldVal) => {console.log("person变了", newVal, oldVal);});return {person};},
};
</script>

reactive定义的数据强制开启了深度监听，即使写deep:false,配置也无效，无法手动关闭深度监听
在这里插入图片描述
4、监听reactive定义的单个响应式数据中的某一个属性

如果这样写，是没有效果的

<template><div>
<h2>姓名：{{person.name}}</h2>
<h2>性别：{{person.sex}}</h2>
<h2>工作：{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button></div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {name: "demo",setup() {   let person = reactive({name:'莲花',sex:'男',job:{job1:{work:'侦探'}}      })watch(person.name, (newVal, oldVal) => {console.log("person.name变了", newVal, oldVal);});return {  person};},
};
</script>

控制台中会提示：这样不能监听，只能监听ref定义的值，或reactive生成的响应式对象，或者是一个数组，而person.name只是reactive生成的响应式对象中的一个属性

在这里插入图片描述
那么监听reactive生成的响应式对象中的一个属性，写法应该是这样的：

先写一个函数，函数有返回值，想监听谁就返回谁

<template><div>
<h2>姓名：{{person.name}}</h2>
<h2>性别：{{person.sex}}</h2>
<h2>工作：{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button></div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {name: "demo",setup() {let person = reactive({name:'莲花',sex:'男',job:{job1:{work:'侦探'}}      })watch(() => person.name,(newValue, oldValue) => {console.log(`person变了 发生了变化: ${oldValue} -> ${newValue}`);})return {  person};},
};
</script>

在这里插入图片描述
5、监听reactive定义的单个响应式数据中的某一些属性

<template><div>
<h2>姓名：{{person.name}}</h2>
<h2>性别：{{person.sex}}</h2>
<h2>工作：{{person.job.job1.work}}</h2>
<button @click="person.name+='~'">姓名变了</button>
<br/>
<br/>
<br/>
<button  @click="person.sex+='！'">性别变了</button>
<br/>
<br/>
<br/>
<button  @click="person.job.job1.work+='还有其他工作'">工作变了</button></div>
</template>
<script >
import { ref, reactive,watch } from "vue";
export default {name: "demo",setup() {let person = reactive({name:'莲花',sex:'男',job:{job1:{work:'侦探'}}})watch(//第一个参数改为数组//newValue, oldValue也会变成数组格式[ () => person.name,() => person.sex],(newValue, oldValue) => {console.log(`person的name或sex变了 `,newValue, oldValue);})  return {  person};},
};
</script>

在这里插入图片描述

6、特殊情况，监听job，job是person中的对象，直接这样写是监听不到的，原因是改的内容层次比较深，我们要改的是job中job1中的work

   let person = reactive({name:'莲花',sex:'男',job:{job1:{work:'侦探'}}})watch(() => person.job,(newValue, oldValue) => {console.log(`person的job变了 `,newValue, oldValue);})

这个时候就需要配置项中配置deep了

      watch(() => person.job,(newValue, oldValue) => {console.log(`person的job变了 `,newValue, oldValue);},{deep:true})

在这里插入图片描述

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

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

相关文章

通信与网络及软件工具的使用心得与记录

通信与网络及软件工具的使用心得与记录

在当今的信息时代&#xff0c;通信工程和网络工具已经成为我们工作和生活中不可或缺的一部分。为了更好地利用这些工具&#xff0c;我们需要了解它们的基本原理和使用方法。本文将为您详细介绍一些重要的通信工程和网络工具&#xff0c;以及它们在实际应用中的使用心得和笔记。…
阅读更多...
华为数通方向HCIP-DataCom H12-831题库(单选题：201-220）

华为数通方向HCIP-DataCom H12-831题库(单选题：201-220）

第201题 DHCP Snooping是一种DHCP安全特性，这项技术可以防御以下哪些攻击? A、DHCP Server仿冒者攻击 B、针对DHCP客户端的畸形报文泛洪攻击 C、仿冒DHCP报文攻击 D、DHCP Server的拒绝服务攻击 答案：ABD 解析： 第202题 两台PE之间通过MP-BGP传播VPNv4路由，以下哪些场景…
阅读更多...
三十、【进阶】B树的演变过程

三十、【进阶】B树的演变过程

1、索引结构 &#xff08;1&#xff09;二叉树 &#xff08;2&#xff09;B-Tree树 B-Tree树最大度数为5&#xff0c;代表每一个节点最多存储4个key(每个节点最多存储4个数据)&#xff0c;5个指针(可以指向5个子节点)。 2、演变过程&#xff08;最大度数为5&#xff09; &…
阅读更多...
基于SpringBoot的社区医院管理系统设计与实现(源码+lw+部署文档+讲解等)

基于SpringBoot的社区医院管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…
阅读更多...
强化学习------DQN算法

强化学习------DQN算法

简介 DQN&#xff0c;即深度Q网络&#xff08;Deep Q-network&#xff09;&#xff0c;是指基于深度学习的Q-Learing算法。Q-Learing算法维护一个Q-table&#xff0c;使用表格存储每个状态s下采取动作a获得的奖励&#xff0c;即状态-价值函数Q(s,a)&#xff0c;这种算法存在很…
阅读更多...
【LeetCode高频SQL50题-基础版】打卡第3天：第16~20题

【LeetCode高频SQL50题-基础版】打卡第3天：第16~20题

文章目录 【LeetCode高频SQL50题-基础版】打卡第3天&#xff1a;第16~20题⛅前言 平均售价&#x1f512;题目&#x1f511;题解 项目员工I&#x1f512;题目&#x1f511;题解 各赛事的用户注册率&#x1f512;题目&#x1f511;题解 查询结果的质量和占比&#x1f512;题目&am…
阅读更多...
JDBC介绍

JDBC介绍

JDBC介绍 JDBC就是使用java语言来操作数据库的一套API&#xff0c;可以操作不同类型的关系性数据库。各种数据库编写自己数据库的驱动来实现JDBC这套接口&#xff0c;从而实现通过java代码来操作不同类型的关系性数据库。各个数据库的驱动jar包就是实现该接口的实现类&#xf…
阅读更多...
Mysql 分布式序列算法

Mysql 分布式序列算法

接上文 Mysql分库分表 1.分布式序列简介 在分布式系统下&#xff0c;怎么保证ID的生成满足以上需求&#xff1f; ShardingJDBC支持以上两种算法自动生成ID。这里&#xff0c;使用ShardingJDBC让主键ID以雪花算法进行生成&#xff0c;首先配置数据库&#xff0c;因为默认的注…
阅读更多...
buuctf PWN warmup_csaw_2016

buuctf PWN warmup_csaw_2016

下载附件&#xff0c;IDA查看 发现直接有显示flag函数 int sub_40060D() {return system("cat flag.txt"); }查看程序起始地址0x40060D ; Attributes: bp-based framesub_40060D proc near ; __unwind { push rbp mov rbp, rsp mov edi, offset comman…
阅读更多...
性能监控-微服务链路追踪skywalking搭建

性能监控-微服务链路追踪skywalking搭建

中文文档&#xff1a;hong设置 (skyapm.github.cio) 参考:微服务链路追踪SkyWalking的介绍和部署_skywalking部署_技术闲聊DD的博客-CSDN博客 参考&#xff1a;链路追踪SkyWalking整合项目以及数据持久化_skywalking 持久化_技术闲聊DD的博客-CSDN博客 Liunx部署skywalking以…
阅读更多...
如何实现torch.arange的tensor版本

如何实现torch.arange的tensor版本

文章目录 背景实现方案不可行的情况 背景 import torch我们都知道&#xff0c;torch.arange只支持数字&#xff0c;不支持tensor&#xff0c;如下&#xff1a; torch.arange(0,5,1)tensor([0, 1, 2, 3, 4]) 但是如果使用tensor&#xff0c;就会报错&#xff1a; torch.arang…
阅读更多...
深入了解快速排序：原理、性能分析与 Java 实现

深入了解快速排序：原理、性能分析与 Java 实现

快速排序&#xff08;Quick Sort&#xff09;是一种经典的、高效的排序算法&#xff0c;被广泛应用于计算机科学和软件开发领域。本文将深入探讨快速排序的工作原理、步骤以及其在不同情况下的性能表现。 什么是快速排序&#xff1f; 快速排序是一种基于分治策略的排序算法&am…
阅读更多...
【Redis实战】击穿+雪崩+穿透

【Redis实战】击穿+雪崩+穿透

架构 短信登录 基于session实现登录 流程图 代码实现 Slf4j Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {/*** session用户key*/public static final String USER_CONSTANT "user";Overridepub…
阅读更多...
【ElasticSearch】基于 Java 客户端 RestClient 实现对 ElasticSearch 索引库、文档的增删改查操作，以及文档的批量导入

【ElasticSearch】基于 Java 客户端 RestClient 实现对 ElasticSearch 索引库、文档的增删改查操作，以及文档的批量导入

文章目录 前言一、对 Java RestClient 的认识1.1 什么是 RestClient1.2 RestClient 核心类&#xff1a;RestHighLevelClient 二、使用 Java RestClient 操作索引库2.1 根据数据库表编写创建 ES 索引的 DSL 语句2.2 初始化 Java RestClient2.2.1 在 Spring Boot 项目中引入 Rest…
阅读更多...
Ubuntu 20.04使用源码安装nginx 1.14.0

Ubuntu 20.04使用源码安装nginx 1.14.0

nginx安装及使用&#xff08;详细版&#xff09;是一篇参考博文。 http://nginx.org/download/可以选择下载源码的版本。 sudo wget http://nginx.org/download/nginx-1.14.0.tar.gz下载源代码。 sudo tar xzf nginx-1.14.0.tar.gz进行解压。 cd nginx-1.14.0进入到源代码…
阅读更多...
Scala第十九章节

Scala第十九章节

Scala第十九章节 scala总目录 文档资料下载 章节目标 了解Actor的相关概述掌握Actor发送和接收消息掌握WordCount案例 1. Actor介绍 Scala中的Actor并发编程模型可以用来开发比Java线程效率更高的并发程序。我们学习Scala Actor的目的主要是为后续学习Akka做准备。 1.1 Ja…
阅读更多...
LabVIEW开发教学实验室自动化INL和DNL测试系统

LabVIEW开发教学实验室自动化INL和DNL测试系统

LabVIEW开发教学实验室自动化INL和DNL测试系统 如今&#xff0c;几乎所有的测量仪器都是基于微处理器的设备。模拟输入量在进行数字处理之前被转换为数字量。对于参加电气和电子测量课程的学生来说&#xff0c;了解ADC以及如何欣赏其性能至关重要。ADC的不确定性可以根据其传输…
阅读更多...
Unity Golang教程-Shader编写一个流动的云效果

Unity Golang教程-Shader编写一个流动的云效果

创建目录 一个友好的项目&#xff0c;项目目录结构是很重要的。我们先导入一个登录界面模型资源。 我们先创建Art表示是美术类的资源&#xff0c;资源是模型创建Model文件夹&#xff0c;由于是在登录界面所以创建Login文件夹&#xff0c;下面依次是模型对应的资源&#xff0c…
阅读更多...
世界前沿技术发展报告2023《世界信息技术发展报告》（六）网络与通信技术

世界前沿技术发展报告2023《世界信息技术发展报告》（六）网络与通信技术

&#xff08;六&#xff09;网络与通信技术 1. 概述2. 5G与光通讯2.1 美国研究人员利用电磁拓扑绝缘体使5G频谱带宽翻倍2.2 日本东京工业大学推出可接入5G网络的高频收发器2.3 美国得克萨斯农工大学通过波束管理改进5G毫米波通信2.4 联发科完成全球首次5G NTN卫星手机连线测试2…
阅读更多...
自动定时删除磁盘文件的脚本（从文件日期最早的开始删）

自动定时删除磁盘文件的脚本（从文件日期最早的开始删）

#!/bin/bash# 指定的挂载点 MOUNTPOINT"/media/vm/MyDisk512GB"# 设置磁盘大小的限制 (例如&#xff1a;800G) LIMIT$((800 * 1024 * 1024)) # 单位是KB# 获取挂载点的已使用空间 USED_SPACE$(df -kP "$MOUNTPOINT" | tail -1 | awk {print $3})echo &quo…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023