当前位置: 首页 > news >正文

【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})  

在这里插入图片描述

相关文章:

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

假期第二篇&#xff0c;对于基础的知识点&#xff0c;我感觉自己还是很薄弱的。 趁着假期&#xff0c;再去复习一遍 之前已经记录了一篇【vue3基础知识点-computed和watch】 今天在学习的过程中发现&#xff0c;之前记录的这一篇果然是很基础的&#xff0c;很多东西都讲的不够…...

跨境电商如何通过软文建立品牌形象?

在全球产业链结构重塑后的今天&#xff0c;越来越多的企业意识到想要可持续发展&#xff0c;就需要在建立品牌形象&#xff0c;在用户心中留下深刻印象&#xff0c;那么应该如何有效建立品牌形象呢&#xff1f;可以利用软文来打造品牌形象&#xff0c;接下来媒介盒子就告诉大家…...

我做了一个简易P图(参数图)分析软件

P图(即参数图&#xff0c;Parameter Diagram)&#xff0c;是一个结构化的工具&#xff0c;帮助大家对产品更好地进行分析。 典型P图格式 P图最好是和FMEA软件联动起来&#xff0c;如国可工软的FMEA软件有P图分析这个功能。 单纯的P图分析软件很少&#xff0c;为了方便做P图分…...

209.Flink(四):状态,按键分区,算子状态,状态后端。容错机制,检查点,保存点。状态一致性。flink与kafka整合

一、状态 1.概述 算子任务可以分为有状态、无状态两种。 无状态:filter,map这种,每次都是独立事件有状态:sum这种,每次处理数据需要额外一个状态值来辅助。这个额外的值就叫“状态”2.状态的分类 (1)托管状态(Managed State)和原始状态(Raw State) 托管状态就是由…...

rabbitmq查看节点信息命令失败

不影响访问rabbitmq&#xff0c;但是无法使用 命令查看节点信息 等 查看节点信息命令&#xff1a;rabbitmq-diagnostics status --node rabbitJHComputer Error: unable to perform an operation on node ‘rabbitJHComputer‘. Please see diagnostics informatio rabbitmq-…...

c语言动态内存分布

前言&#xff1a; 随着我们深入的学习c语言&#xff0c;之前使用的静态内存分配已经难以满足我们的实际需求。比如前面我们的通讯录功能的实现&#xff0c;如果只是静态内存分配&#xff0c;那么也就意味着程序开始的内存分配大小就是固定的&#xff0c;应该开多大的空间呢&am…...

1.3.2有理数减法(第一课时)作业设计

【学习目标】 1&#xff0e;理解有理数减法法则&#xff0c;能熟练地进行有理数的减法运算&#xff0e; 2&#xff0e;感受有理数减法与加法对立统一的辨证思想&#xff0c;体会转化的思想方法&#xff0e;...

vue3 -- ts封装 Turf.js地图常用方法

Turf.js中文网 地理空间分析库,处理各种地图算法 文档地址 安装 Turf 库 npm install @turf/turf创建src/hooks/useTurf.ts 文件1:获取线中心点 效果: 代码: useTurf.ts import * as turf from @turf/turf// 获取线中心点 export class CenterPointOfLine {...

Qt之实现圆形进度条

在Qt自带的控件中&#xff0c;只有垂直进度条、水平进度条两种。 在平时做页面开发时&#xff0c;有些时候会用到圆形进度条&#xff0c;比如说&#xff1a;下载某个文件的下载进度。 展示效果&#xff0c;如下图所示&#xff1a; 实现这个功能主要由以下几个重点&#xff1a…...

C# 图解教程 第5版 —— 第1章 C# 和 .NET 框架

文章目录 1.1 在 .NET 之前1.2 .NET 时代1.2.1 .NET 框架的组成1.2.2 大大改进的编程环境 1.3 编译成 CIL1.4 编译成本机代码并执行1.5 CLR1.6 CLI1.7 各种缩写1.8 C# 的演化1.9 C# 和 Windows 的演化&#xff08;*&#xff09; 1.1 在 .NET 之前 MFC&#xff08;Microsoft Fou…...

electronjs入门-聊天应用程序,与Electron.js通信

随着第一章中构建的应用程序&#xff0c;我们将开始将其与Electron框架中的模块集成&#xff0c;并以此为基础&#xff0c;以更实用的方式了解它们。 过程之间的通信 根据第二章中的解释&#xff0c;我们将发送每个进程之间的消息&#xff1b;具体来说联系人和聊天&#xff1…...

【自用】ubuntu 18.04 LTS安装opencv 3.4.16 + opencv_contrib 3.4.16

1.下载 opencv 3.4.16 opencv_contrib 3.4.16 其中&#xff0c;opencv_contrib解压后的多个文件夹复制到opencv内、合并 声明&#xff1a;尚未验证该方式是否可行 2.安装 参考博文&#xff1a; https://zhuanlan.zhihu.com/p/650792342 https://zhuanlan.zhihu.com/p/8719780…...

递归解析Json,实现生成可视化Tree+快速获取JsonPath | 京东云技术团队

内部平台的一个小功能点的实现过程&#xff0c;分享给大家&#xff1a; 递归解析Json&#xff0c;可以实现生成可视化Tree快速获取JsonPath。 步骤&#xff1a; 1.利用JsonPath读取根&#xff0c;获取JsonObject 2.递归层次遍历JsonObjec&#xff0c;保存结点信息 3.利用z…...

GraceUI相关的 知识

调试工具&#xff1a;UniApp提供了一些调试工具和插件&#xff0c;如uni-app-cli、调试器等&#xff0c;可以帮助你更好地定位和解决问题。同时&#xff0c;使用浏览器的开发者工具或模拟器的调试功能&#xff0c;可以更直观地观察页面效果和调试代码。 对于 GraceUI 的普通版本…...

三十二、【进阶】hash索引结构

1、hash索引结构 &#xff08;1&#xff09;简述&#xff1a; hash索引&#xff0c;就是采用一定的hash算法&#xff0c;将键值换算成新的hash值&#xff0c;映射到对应的槽位上&#xff0c;然后存储在hash表中。 &#xff08;2&#xff09;图示&#xff1a; 2、hash索引结构…...

如果有一天AI能自主编程了,程序员还有前途吗?

人们一直想知道人工智能&#xff08;AI&#xff09;等新技术将如何影响就业。如今的一个大问题是&#xff1a;人工智能会接管程序员的角色吗&#xff1f; 编程主要是关于人们学习计算机语言&#xff0c;这需要大量的时间和努力。但人工智能正在改变这一点。像 GPT-4 这样的系统…...

网络安全:个人信息保护,企业信息安全,国家网络安全的重要性

在当前的数字化时代&#xff0c;无论是个人&#xff0c;企业&#xff0c;还是国家&#xff0c;都会面临严重的网络安全威胁。网络安全不仅涉及我们的日常生活&#xff0c;也涉及到社会的稳定和国家的安全。这就需要我们高度重视网络安全&#xff0c;强化个人信息保护&#xff0…...

自动驾驶学习笔记(二)——Apollo入门

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《2023星火培训【感知专项营】》免费课程—>传送门 文章目录 前言 Ubuntu Linux文件系统 Linux指令…...

Flask 进行 Web 开发时,常见的错误

ImportError: No module named ‘flask’ 错误描述&#xff1a; 这个错误表示 Python 找不到 Flask 模块。解决方法&#xff1a; 确保已经正确安装了 Flask 模块。你可以使用以下命令来安装 Flask&#xff1a;pip install flaskAttributeError: ‘module’ object has no attri…...

【项目】5.1阻塞和非阻塞、同步和异步 5.2Unix、Linux上的五种IO模型

5.1阻塞和非阻塞、同步和异步&#xff08;网络IO&#xff09; 典型的一次IO的两个阶段是什么&#xff1f;数据就绪和数据读写 数据就绪&#xff1a;根据IO操作的就绪状态 阻塞非阻塞 数据读写&#xff1a;根据应用程序和内核的交互方式 同步异步 陈硕&#xff1a;在处理IO的…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...