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

Vue3.0教程005：watch监视ref定义的【基本类型】数据和【对象类型】数据

news 来源：原创 2025/7/16 0:39:17

文章目录

4、watch监视
- 4.1 前言
- 4.2 情况一
- 4.3 情况二

4、watch监视

4.1 前言

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

4.2 情况一

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

<template><div><el-card style="max-width: 480px"><template #header><div class="card-header"><span>监视【ref】定义的【基本类型】数据</span></div></template><h2>当前求和为：{{sum}}</h2><el-button type="success" @click="changeSum">点我+1</el-button><template #footer>监视属性watch：<el-tag type="info">情况一</el-tag></template></el-card></div>
</template><script lang="ts" setup>
import {ref, watch} from 'vue'let sum = ref(0)function changeSum(){sum.value += 1;
}// 监视 watch(谁?, 回调函数)
watch(sum, (newValue, oldValue)=>{console.log('sum变化了', newValue, oldValue);
})
</script><style scoped></style>

注意：

监视ref数据的时候，不需要写value
watch(sum, (newValue, oldValue))

4.3 情况二

监视ref定义的对象类型数据，实现代码：

<template><div><el-row :gutter="4"><el-col :span="12"><el-card style="max-width: 480px"><template #header><div class="card-header"><span>监视【ref】定义的【基本类型】数据</span></div></template><h2>当前求和为：{{sum}}</h2><el-button size="small" type="success" @click="changeSum">点我+1</el-button><template #footer>监视属性watch：<el-tag type="info">情况一</el-tag></template></el-card></el-col><el-col :span="12"><el-card style="max-width: 480px"><template #header><div class="card-header"><span>监视【ref】定义的【对象类型】数据</span></div></template><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><el-button size="small" type="primary" @click="changeName">修改名字</el-button><el-button size="small" type="success" @click="changeAge">修改年龄</el-button><el-button size="small" type="danger" @click="changePerson">修改全部</el-button><template #footer>监视属性watch：<el-tag type="info">情况二</el-tag></template></el-card></el-col></el-row></div>
</template><script lang="ts" setup>
import {ref, watch} from 'vue'let sum = ref(0)let person = ref({name: '张三',age: 18
})function changeSum(){sum.value += 1;
}function changeName(){person.value.name += '~'
}function changeAge(){person.value.age += 1
}function changePerson(){person.value = {name: '李四', age: 25}
}// 监视 watch(谁?, 回调函数)
watch(sum, (newValue, oldValue)=>{console.log('✅sum变化了', newValue, oldValue)
})watch(person, (newValue, oldValue)=>{console.log("✅person变化了：",newValue, oldValue)
})
</script><style scoped></style>

实现效果，这里监视的是整个对象，只有点击【修改全部】的时候，才能触发监视器：

如果想监视对象的某一个属性【name/age】，则需要开启深度监视，修改监视代码，添加deep:true：

watch(person, (newValue, oldValue)=>{console.log("✅person变化了：",newValue, oldValue)
},{deep:true})

实现效果：

如果开启立即监视，即刷新页面的时候，当数据没有改变的时候就监视，实现代码如下：

watch(person, (newValue, oldValue)=>{console.log("✅person变化了：",newValue, oldValue)
},{deep:true, immediate:true})

打印结果如下，当刷新浏览器，页面数据没有变化，但仍会默认监视，但是此时旧的值是undefined：

Vue3.0教程005：watch监视ref定义的【基本类型】数据和【对象类型】数据

文章目录 4、watch监视4.1 前言4.2 情况一4.3 情况二 4、watch监视 4.1 前言作用：监视数据的变化（和vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据： ref定义的数据。reactive定义的数据。函数返回…...

编程日记 2025/7/16 0:39:17

【Java的批量操作】

系列文章目录 Java知识点文章目录系列文章目录👉前言👉一、常见批量操作方法👉1-1、JDBC 批量操作（数据库）👉1-2、MyBatis 批量操作👉1-3、Java 8 Stream 批量处理集合👉1-4、多线…...

编程日记 2025/7/10 8:30:05

流复备机断档处理

文章目录环境症状问题原因解决方案环境系统平台：UOS（海光）,UOS （飞腾）,UOS（鲲鹏）,UOS（龙芯）,UOS （申威）,银河麒麟svs（X86_64&…...

编程日记 2025/7/16 0:08:05

PostgreSQL架构

目录一、PostgreSQL核心特性与优势 1.PostgreSQL简介 2.PostgreSQL的核心特点 （1）开源与自由 （2）高度符合SQL标准 （3）丰富的数据类型 （4）事务与并发控制 （5&…...

编程日记 2025/7/15 18:50:58

苍穹外卖系统结构与功能报告

一、系统简介苍穹外卖系统是为餐饮企业定制的数字化解决方案，包含管理端后台和用户端小程序两部分。管理端面向餐饮企业员工，支持菜品、套餐、订单等核心业务的数字化管理；用户端面向消费者，提供在线点餐、支付、订单跟踪等功能…...

编程日记 2025/7/15 23:09:04

CAU数据库class3 关系型数据库基础

关系数据库模型的3个要素数据结构二维表数据操作特点操作的对象为元组，操作的结果为元组高度非过程化，用户不关系是怎么实现的完整性约束数据完整性是指保证数据真确的特性实体完整性参照完整性用户定义完整性关系的形式定义例子&…...

编程日记 2025/7/15 23:44:33

【Qt】在OrinNX上，使用命令安装qtmultimedia5-dev时报错

1、问题描述在OrinNX+Ubuntu20.04上，使用命令安装qtmultimedia5-dev时报错 sudo apt install qtmultimedia5-devThe following packages have unmet dependencies: qtmultimedia5-dev : Depends: libpulse-dev but it is not going to be installed E: Unable to correct p…...

编程日记 2025/7/15 23:54:16

阿里云CDN刷新预热--刷新URL

文章目录一、全英文URL刷新预热二、掺杂中文的URL刷新预热2.1 对带中文URL进行编码2.2 预热刷新三、CDN刷新-核心作用与价值3.1 核心作用3.2 核心价值3.3 典型使用场景 *最后我想说：请你不要相信我说的每一句话，这只是我的个人经验* 一、全英文URL刷新…...

编程日记 2025/7/15 23:24:13

anaconda、miniconda、conda的关系及miniconda安装

anaconda、miniconda、conda的关系及miniconda安装文章目录前言正文定义关系Linux安装miniconda新建一个python3.8环境参考前言本文用于记录关于Anaconda、conda和Miniconda的定义及其关系的总结123： 正文定义 conda 一个跨平台的开源包管理和环境管理工具…...

编程日记 2025/7/15 23:04:48

SpringBoot实现本地对象存储【minio、阿里云、七牛云】

引入依赖  <dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.5.12</version> </dependency> <dependency><groupId>com.aliyun.…...

编程日记 2025/7/15 23:52:58

阿里云百炼(1) : 阿里云百炼应用问答_回答图片问题_方案1_提问时上传图片文件

直接用于拍照答题不大理想, 可能适用其他用途, 更好的方案: 阿里云百炼(1) : 阿里云百炼应用问答_回答图片问题_方案2_提取题目再提问-CSDN博客 1.实现代码 package cn.nordrassil.ly.test.拍照答题;import com.alibaba.dashscope.app.Application; import com.alibaba.dashsc…...

编程日记 2025/7/15 17:43:42

理解阿里云的MQTT

一、阿里云的mqtt分几种阿里云提供的MQTT服务主要分为‌标准MQTT协议‌和‌P2P模式MQTT‌两种类型，二者在通信模式及适用场景上有显著差异： 1、标准MQTT与P2P MQTT的区别 ‌特性‌‌标准MQTT‌‌P2P模式MQTT‌‌通信模式‌发布/订阅（Pub/S…...

编程日记 2025/7/15 17:38:55

HarmonyOS5云服务技术分享--云缓存快速上手指南

大家好，今天我们来聊聊如何快速上手华为AppGallery Connect（AGC）的云缓存服务。作为一款基于Serverless架构的Key-Value型缓存服务，它不仅能自动弹性伸缩，还能免去运维烦恼，非常适合高并发场景下的数据快速…...

编程日记 2025/7/15 22:57:03

FreeSWITCH rtcp-mux 测试

rtcp 跟 rtp 占用同一个端口，这就是 rtcp 复用 Fs 呼出是这样的： originate [rtcp_muxtrue][rtcp_audio_interval_msec5000]user/1001 &echo 需要同时指定 rtcp_audio_interval_msec，否则 rtcp_mux 不能生效 Fs 呼入不需要配置&#xf…...

编程日记 2025/7/15 23:59:27

浏览器播放 WebRTC 视频流

源码（vue） <template><video ref"videoElement" class"video" autoplay muted playsinline></video> </template><script setup lang"ts">import { onBeforeUnmount, onMounted, ref } fr…...

编程日记 2025/7/10 17:17:21

SpringBoot3+Vue3(1)-后端请求头校验，jwt退出登录，mybaits实现数据库用户校验

1.后端：jwt请求头校验解析工具类jwtUtils 解析token 令牌是否过期，验证正常、异常、运行时错误倒入工具类是resource 工具类中添加解析用户的方法： 在在工具类添加id解析此处调用添加controller做测试测试&…...

编程日记 2025/7/14 1:47:46

Oracle RAC 中的 RBAL 进程

Oracle RAC 中的 RBAL 进程 RBAL 进程概述 RBAL（ReBalancer）是 Oracle RAC 和 ASM（Automatic Storage Management）环境中的一个关键后台进程，主要负责 ASM 磁盘组的重新平衡操作。主要功能磁盘组监控&#xff1a…...

编程日记 2025/7/10 12:43:57

mac上将 Excel 文件的扩展名从 .xls 改为 .xlsx 后，打开时报错：“文件格式或文件扩展名无效”。

方法一：使用 Excel for Mac 打开并另存为打开 Excel 应用程序。打开你的 .xls 文件： 如果 Excel 能正常打开它，说明文件没问题。在菜单栏点击：文件 → 另存为。在文件格式中选择：Excel 工作簿 (.xlsx)。点击保存…...

编程日记 2025/7/11 1:03:21

【算法-栈】深入栈模拟题：从题型特征到实现技巧

算法相关知识点可以通过点击以下链接进行学习一起加油！双指针滑动窗口二分查找前缀和位运算模拟链表哈希表字符串模拟在算法学习中，栈是最基础也是最容易上手的数据结构之一。然而，当它被用于模拟复杂操作流程时，却常常成为区分“…...

编程日记 2025/7/11 20:02:10

OK536N-C测评:开箱体验以及在Linux下如何管理开发板

前言 OK536N-C终于到我手上了，因为我的主要领域是做嵌入式音视频。例如相机类产品，录像类产品，直播类产品都是我所涉及到的。本片文章一起来开箱见证下OK536N-C有哪些魅力，据说很强。对于一个嵌入式领域的开发者来说&#xff0…...

编程日记 2025/7/13 8:23:21

【强化学习】深度强化学习 - Deep Q-Network（DQN）算法

文章目录摘要一、DQN核心原理1. Q-learning回顾2. 用深度网络逼近Q函数3. 经验回放（Experience Replay）4. 目标网络（Target Network）5. 损失函数6. ε-贪心策略（ε-greedy） 二、算法流程与伪代码三、典型实…...

编程日记 2025/7/10 13:11:48

Python实例题：PyOt实现简易浏览器

目录 Python实例题题目代码实现功能说明基本浏览功能： 标签页支持： 用户界面： 使用方法注意事项 Python实例题题目 PyOt实现简易浏览器代码实现 import sys from PyQt5.QtWidgets import (QApplication, QMainWindow, QT…...

编程日记 2025/7/14 1:47:15

MinerU可视化界面程序部署（Windows环境）

前提是要安装好MinerU，才能部署可视化程序（这个可视化程序的源码是MinerU自带的），安装MinerU的步骤参考： MinerU安装(pdf转markdown、json)-CSDN博客下面进行可视化界面的部署操作（在Windows环境部署&…...

编程日记 2025/7/14 17:03:57

STM32之定时器(TIMER)与脉冲宽度调制(PWM)

一、STM32定时器的原理与应用基本概念定时器的作用一般是为了使用定时功能和中断功能（洗衣机、微波炉、电风扇、智能空调......），当然在STM32中也可以利用定时器产生周期性的脉冲信号来控制不同的外设（电机的转速、舵机的角度…...

编程日记 2025/7/14 16:37:12

Linux jq 命令使用详解

简介 jq 是一个命令行 JSON 处理器，允许解析、过滤、转换和格式化 JSON 数据，提取特定字段或重构 JSON，高效使用 JSON 中的 API 或配置文件。安装 Debian/Ubuntu sudo apt install jqCentOS/RHEL sudo yum install jq或sudo dnf insta…...

编程日记 2025/7/12 1:46:37

【25软考网工】第七章（2）UOS Linux文件和目录管理、用户和组管理

博客主页：christine-rr-CSDN博客专栏主页：软考中级网络工程师笔记大家好，我是christine-rr !目前《软考中级网络工程师》专栏已经更新三十多篇文章了，每篇笔记都包含详细的知识点，希望能帮助到你&#x…...

编程日记 2025/7/15 15:12:47

1.3 C++之变量与数据类型

变量与数据类型教程目标理解变量是存储数据的“容器”，数据类型决定容器中能放什么。掌握 int, float, char, bool 的使用。学会声明变量、赋值，定义常量 const。一、什么是变量？ 生活比喻：变量就像“贴了标签的盒子” 盒子…...

编程日记 2025/6/28 22:00:40

SAR ADC 比较器寄生电容对性能的影响

比较器的输入端直接连接CDAC的输出，那比较器的输入端的寄生电容对SAR ADC的性能是否有影响，我们来分析一下。这是一个单端传统的SAR ADC，SAR ADC 转换只需要采样阶段和转换两个阶段，其中采样阶段一般包含比较器的offset的校正。采样阶段：接Vin的开关闭合，接Vcom的开关…...

编程日记 2025/7/11 20:18:53

20250520在全志H3平台的Nano Pi NEO CORE开发板上运行Ubuntu Core16.04.3时跑通4G模块EC20

1、h3-sd-friendlycore-xenial-4.14-armhf-20210618.img.gz 在WIN10下使用7-ZIP解压缩/ubuntu20.04下使用tar 2、Win32DiskImager.exe 写如32GB的TF卡。【以管理员身份运行】 3、TF卡如果已经做过会有3个磁盘分区，可以使用SD Card Formatter/SDCardFormatterv5_WinE…...

编程日记 2025/7/11 8:20:50

探秘汽车门槛梁内板右后段成型工艺

引言：汽车制造的关键环节在汽车制造的复杂体系中，每一个零部件都扮演着不可或缺的角色，其中汽车门槛梁内板右后段虽看似平凡，却对汽车的整体性能和安全起着关键作用。它是车身结构的重要组成部分，犹如建筑的基石&…...

编程日记 2025/7/11 8:21:04

阅读笔记---城市计算中用于预测学习的时空图神经网络研究综述

摘要随着近年来传感技术的进步，智能城市产生并记录了无数的时空数据。预测时空数据的演变模式是城市计算的一个重要而又苛刻的方面，它可以增强各个领域的智能管理决策，包括交通、环境、气候、公共安全、医疗保健等。传统的统计和深度学习方…...

编程日记 2025/7/10 23:34:07

SpringBootDay1|面试题

目录一、springboot框架 1、什么是springboot 2、Spring Boot的主要优点 3、springboot核心注解 4、定义banner（springboot的logo） 5、springboot配置文件 6、springboot 整合 jdbc 二、面试题 1）springmvc的作用编辑 2&#x…...

编程日记 2025/7/13 5:25:06

PyCharm2025的字体的设置

前言 Pycharm中的字体调节，看起来似乎无足轻重。但是，能从容的调节，也是蛮好的，特别是做程序演示的时候。当前PyCharm采用的是最新的2025.1.1版本（Community）,当前的操作系统是Windows。一、初始状态 …...

编程日记 2025/7/11 8:21:07

【Linux】进程间通信（三）：命名管道

📝前言： 这篇文章我们来讲讲Linux 进程间通信（三）——命名管道 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页愚润求学 🌄其他专栏：C学习…...

编程日记 2025/7/12 6:16:37

人工智能+：职业技能培训的元命题与能力重构

当“人工智能”成为各行各业的热门命题时，我们似乎跳过了一个更根本的思考：人类究竟需要怎样的AI能力？这个问题不解决，任何技术赋能都可能沦为无本之木。真正的挑战不在于如何应用AI，而在于如何定义人与AI的能力边界—…...

编程日记 2025/6/28 22:00:43

HarmonyOS5云服务技术分享--云存储SDK文章整理

在HarmonyOS ArkTS应用中集成华为云存储SDK指南大家好呀！今天咱们来聊聊如何将华为云存储SDK集成到基于ArkTS（API 9-11）的HarmonyOS应用中。这篇指南会手把手带你完成从环境准备到代码实现的完整流程，过程中遇到的常见问题也会贴…...

编程日记 2025/7/11 16:45:24

《财务自由之路Ⅱ》理论篇

欢迎来到啾啾的博客🐱。记录学习点滴。分享工作思考和实用技巧，偶尔也分享一些杂谈💬。欢迎评论交流，感谢您的阅读😄。目录引言认知赚钱方式收入与负债都很重要整天工作的人，没有时间赚钱一些建议做法…...

编程日记 2025/6/29 1:02:26

AI筑基，新质跃升｜英码科技亮相华为广东新质生产力创新峰会，发布大模型一体机新品，助力产业智能化转型

5月15日，以“AI筑基，新质跃升”为主题的华为中国行2025广东新质生产力创新峰会在惠州圆满召开。本次峰会聚焦人工智能、算力基础设施等新ICT技术如何驱动“新质生产力”，共探广东高质量发展新路径。英码科技受邀出席本次峰会，并携…...

编程日记 2025/7/14 20:47:09

【C++】C++的拷贝构造函数介绍使用

拷贝构造函数 1.作用示例代码1：拷贝构造函数的调用示例代码2：系统默认的拷贝构造做的事情示例代码3：写法1-4示例代码4：写法5示例代码5：C编译器默认给类提供了4中隐含的方法 2.语法规则示例代码： 3.深拷贝和…...

编程日记 2025/7/14 20:00:09

能管理MySQL、Oracle、达梦数据库的桌面管理软件开源了

能管理MySQL、Oracle、达梦数据库的桌面管理软件开源了能管理MySQL、Oracle、达梦数据库的桌面管理软件开源了1.项目介绍2. 项目源码开发2.1克隆项目2.2 配置并运行 3.使用3.1添加数据库连接3.2新增表3.3操作表3.4 运行sql 4.总结能管理MySQL、Oracle、达梦数据库的桌面管理…...

编程日记 2025/7/12 16:00:44

5.20打卡

浙大疏锦行 DAY 31 文件的规范拆分和写法知识点回顾 1. 规范的文件命名 2. 规范的文件夹管理 3. 机器学习项目的拆分 4. 编码格式和类型注解作业：尝试针对之前的心脏病项目，准备拆分的项目文件，思考下哪些部分可以未来复用。预处理&am…...

编程日记 2025/7/15 11:54:19

unity XCharts插件生成曲线图在UICanvas中

【推荐100个unity插件之22】基于UGUI的功能强大的简单易用的Unity数据可视化图表插件——XCharts3.0插件的使用_unity xcharts-CSDN博客...

编程日记 2025/7/11 15:10:55

创建thinkphp项目并配置数据库

配置环境并引入UI ssr模式使用 composer 命令在指定的目录安装 Thinkphp6.x composer create-project topthink/think tp6demo出现Fatal error: Directive ‘track_errors’ is no longer available in PHP in Unknown on line 0说明你的php版本较高，在php.ini中…...

编程日记 2025/6/28 22:08:56

头歌实践平台：动态NAT配置

第一：打开GNS3，创建名为nat的项目文件第二：创建网络拓扑结构如下： note:s端口线需要在关闭路由器的情况下双击进入，选配4T端口（不要忘记点击OK） 第三：打开所有设备（所…...

编程日记 2025/6/29 0:11:40

贝叶斯优化+CNN+LSTM=小论文创新点

2周速成小论文可能吗？有点悬，但有可能。今天我就给论文er推荐一个高潜力、易创新、适合速发的小论文选题：贝叶斯优化CNNLSTM！ 这种“三结合”的优势在于技术成熟度高（经典CNN和LSTM）、创新点灵活性强&…...

编程日记 2025/7/11 15:56:39

软考中级软件设计师——计算机网络 IP地址与子网掩码相关题型

一、常见题型分类题型考查重点解题关键子网划分根据需求划分子网，计算网络地址、广播地址、可用主机范围等二进制与十进制转换，子网掩码计算，网络位与主机位划分子网掩码转换CIDR表示法（如/24）与点分十进制&#xff…...

编程日记 2025/7/11 1:19:23

bi报表是什么意思？如何制作一张bi报表？

目录一、BI 报表是什么意思？ 1. BI 报表的基本概念 2. BI 报表的特点 3. BI 报表的作用二、制作 BI 报表的前期准备 1. 明确报表的目标和需求 2. 确定数据来源 3. 选择合适的 BI 工具三、制作 BI 报表的具体步骤 1. 数据收集与整理 2. 数据分析 3. 可…...

编程日记 2025/7/14 1:47:26

vivado fpga程序固化

一般下载到fpga上的程序在掉电之后就会丢失，如果想要掉电之后程序不丢失，就需要将比特流文件固化到板载的flash上。以下以我的7a100t开发板为例，介绍程序固化的流程点击OK就可以下载了。...

编程日记 2025/7/11 15:40:24

人生的真谛杂谈

文章目录自我的哲学奠基自我存在的真实性身体与思想的决定关系自由意志自我的当代解构三观的意义系统构建世界观：认知世界的根基人生观：生命意义的探索价值观：行为选择的准则三观构建的终极目标价值的哲学解构价值的本体论价值客观性的形而…...

编程日记 2025/7/15 13:53:02

【Java】继承和多态在 Java 中是怎样实现的?

extends 关键字 class 子类 extends 父类 {... } // 类继承是单继承父类的哪些成员被继承 ? 访问修饰符 public 和 protected 修饰的父类成员字段和成员方法可以被继承 , 父类的默认方法只能在同包下继承 , 父类的 private 成员和构造方法不可继承 . super 关键字表示父类…...

编程日记 2025/6/28 22:00:47

文章目录

4、watch监视

4.1 前言

4.2 情况一

4.3 情况二

相关文章：