vue3+ts watch 整理
watch() 一共可以接受三个参数,侦听数据源、回调函数和配置选项
作用:监视数据的变化(和Vue2中的watch作用一致)
特点:Vue3中的watch只能监视以下四种数据:
ref定义的数据。
reactive定义的数据。
函数返回一个值(getter函数)。
一个包含上述内容的数组
ref 定义的数据
<template><div>str===={{ str }}</div><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPerson">点击修改部分属性</el-button><el-button @click="editPersonAll">点击修改全部</el-button><el-button @click="editString">修改基本数据类型</el-button></div>
</template><script setup lang="ts">
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
// let str: Ref<string> = ref("AAA"); // 泛型写法
let str = ref("AAA");
let personObj = ref<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPerson = () => {personObj.value.name = "bbb";
};
const editPersonAll = () => {personObj.value.car = {price: 222,color: "blue",};
};const editString = () => {str.value = "Bbb";
};
// 监听基本数据类型变化
watch(() => str.value,(newValue, oldValue) => {console.log("监听基本数据类型变化newValue");console.log(newValue);console.log(oldValue);}
);
// 监听对象类型某个值的变化
watch(() => personObj.value.name,(newValue, oldValue) => {console.log("personObj.value.name");console.log("newValue==" + newValue);console.log("oldValue==" + oldValue);}
);/* 监视,情况一:监视【ref】定义的【对象类型】数据,监视的是对象的地址值,若想监视对象内部属性的变化,需要手动开启深度监视watch的第一个参数是:被监视的数据watch的第二个参数是:监视的回调watch的第三个参数是:配置对象(deep、immediate等等.....) */
watch(personObj,(newValue, oldValue) => {console.log("修改整个车");console.log("newValue==");let { car, name, age } = toRefs(newValue);console.log(car, name.value, age.value);console.log("oldValue==");// let {car,name,age} = toRefs(oldValue)// console.log(car,name,age);},{deep: true,}
);
</script><style scoped></style>
reactive 定义的数据
ref 写法
<template><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPerson">点击修改部分属性</el-button><el-button @click="editPersonAll">点击修改全部</el-button></div>
</template>
<script setup lang="ts">
import { reactive, watch, ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj = reactive<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPerson = () => {personObj.name = "bbb";
};
const editPersonAll = () => {personObj.car = {price: 222,color: "blue",};
};
//监听基本数据类型的写法
watch(() => personObj.name,(newValue, oldValue) => {console.log("newValue==" + newValue);console.log("oldValue==" + oldValue);}
);
监听对象类型的写法 (推荐使用这种方法)
// watch(
// () => personObj.car,
// (newValue, oldValue) => {
// console.log("修改整个车");
// console.log("newValue==" + newValue);
// console.log("oldValue==" + oldValue);
// }
// );
监听对象类型的写法
watch(personObj.car, (newValue, oldValue) => {console.log("修改整个车");console.log("newValue==" + newValue);console.log("oldValue==" + oldValue);
});
</script>
监听多个值变化
ref 写法
<template><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPersonName">点击修改name</el-button><el-button @click="editPersonCarColor">点击修改car-color</el-button></div>
</template><script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj = ref<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPersonName = () => {personObj.value.name = "bbb";
};
const editPersonCarColor = () => {personObj.value.car.color = "bule";
};// 监听对象类型某个值的变化
// 传入的是数组, 获取到的newValue 也是数组,一一对应的关系
watch([() => personObj.value.name, personObj.value.car],(newValue, oldValue) => {console.log("personObj.value--watch");console.log(newValue);console.log(oldValue);},{deep: true,}
);
</script><style scoped></style>
reactive 写法
<template><div>perosn 的name===={{ personObj.name }}</div><div>Person 的age===={{ personObj.age }}</div><div>Person的Car===={{ personObj.car }}</div><div>Person的Car.color===={{ personObj.car.color }}</div><div>Person的Car.price===={{ personObj.car.price }}</div><div><el-button @click="editPersonName">点击修改name</el-button><el-button @click="editPersonCarColor">点击修改car-color</el-button></div>
</template><script setup lang="ts">
import { tr } from "element-plus/es/locales.mjs";
import { reactive, watch, ref, toRefs, Ref } from "vue";
interface Person {name: string;age: number;car: {price: number;color: string;};
}
let personObj = reactive<Person>({name: "aaa",age: 12,car: {price: 12,color: "reds",},
});
const editPersonName = () => {personObj.name = "bbb";
};
const editPersonCarColor = () => {personObj.car.color = "bule";
};// 监听对象类型某个值的变化
// 传入的是数组, 获取到的newValue 也是数组,一一对应的关系
watch([() => personObj.name, personObj.car],(newValue, oldValue) => {console.log("personObj.value--watch");console.log(newValue);console.log(oldValue);},{deep: true,}
);
</script><style scoped></style>
相关文章:
vue3+ts watch 整理
watch() 一共可以接受三个参数,侦听数据源、回调函数和配置选项 作用:监视数据的变化(和Vue2中的watch作用一致) 特点:Vue3中的watch只能监视以下四种数据: ref定义的数据。 reactive定义的数据。 函数返…...
2025年最新深度学习环境搭建:Win11+ cuDNN + CUDA + Pytorch +深度学习环境配置保姆级教程
本文目录 一、查看驱动版本1.1 查看显卡驱动1.2 显卡驱动和CUDA对应版本1.3 Pytorch和Python对应的版本1.4 Pytorch和CUDA对应的版本 二、安装CUDA三、安装cuDANN四、安装pytorch五、验证是否安装成功 一、查看驱动版本 1.1 查看显卡驱动 输入命令nvidia-smi可以查看对应的驱…...
USART_串口通讯轮询案例(HAL库实现)
引言 前面讲述的串口通讯案例是使用寄存器方式实现的,有利于深入理解串口通讯底层原理,但其开发效率较低;对此,我们这里再讲基于HAL库实现的串口通讯轮询案例,实现高效开发。当然,本次案例需求仍然和前面寄…...
CAN 网络介绍
背景 在T-Box 产品开发过程中,我们离不开CAN总线,因为CAN总线为我们提供了车身的相关数据,比如,车速、油耗、温度等。用于上报TSP平台,进行国标认证;也帮助我们进行车身控制,比如车门解锁/闭锁…...
pytorch 多机多卡训练方法
在深度学习训练中,使用多机多卡(多台机器和多块 GPU)可以显著加速模型训练过程。 PyTorch 提供了多种方法来实现多机多卡训练,以下是一些常用的方法和步骤: 1. 使用 torch.distributed 包 PyTorch 的 torch.distribut…...
【智能控制】年末总结,模糊控制,神经网络控制,专家控制,遗传算法
关注作者了解更多 我的其他CSDN专栏 毕业设计 求职面试 大学英语 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 …...
Linux系统 C/C++编程基础——使用make工具和Makefile实现自动编译
ℹ️大家好,我是练小杰,今天周二了,距离除夕只有6天了,新的一年就快到了😆 本文是有关Linux C/C编程的make和Makefile实现自动编译相关知识点,后续会不断添加相关内容 ~~ 回顾:【Emacs编辑器、G…...
kafka学习笔记7 性能测试 —— 筑梦之路
kafka 不同的参数配置对 kafka 性能都会造成影响,通常情况下集群性能受分区、磁盘和线程等影响因素,因此需要进行性能测试,找出集群性能瓶颈和最佳参数。 # 生产者和消费者的性能测试工具 kafka-producer-perf-test.sh kafka-consumer-perf-t…...
C#与AI的共同发展
C#与人工智能(AI)的共同发展反映了编程语言随着技术进步而演变,以适应新的挑战和需要。自2000年微软推出C#以来,这门语言经历了多次迭代,不仅成为了.NET平台的主要编程语言之一,还逐渐成为构建各种类型应用程序的强大工具。随着时…...
multus使用教程
操作步骤如下: 1.在vmware vsphere上配置所有主机使用的端口组安全项 Forged transmits 设置为: Accept Promiscuous Mode 设置为:Accept Promiscuous Mode(混杂模式)和Forged Transmits(伪传输)…...
用JAVA写算法之输入输出篇
本系列适合原来用C语言或其他语言写算法,但是因为找工作或比赛的原因改用JAVA语言写算法的同学。当然也同样适合初学算法,想用JAVA来写算法题的同学。 常规方法:使用Scanner类和System.out 这种方法适用于leetcode,以及一些面试手…...
场馆预定平台高并发时间段预定实现V2
🎯 本文档介绍了场馆预订系统接口V2的设计与实现,旨在解决V1版本中库存数据不一致及性能瓶颈的问题。通过引入令牌机制确保缓存和数据库库存的最终一致性,避免因服务器故障导致的库存错误占用问题。同时,采用消息队列异步处理库存…...
(1)STM32 USB设备开发-基础知识
开篇感谢: 【经验分享】STM32 USB相关知识扫盲 - STM32团队 ST意法半导体中文论坛 单片机学习记录_桃成蹊2.0的博客-CSDN博客 USB_不吃鱼的猫丿的博客-CSDN博客 1、USB鼠标_哔哩哔哩_bilibili usb_冰糖葫的博客-CSDN博客 USB_lqonlylove的博客-CSDN博客 USB …...
Spring Boot 整合 ShedLock 处理定时任务重复执行的问题
🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程,入门到实战 🌺《RabbitMQ》…...
缓存之美:万文详解 Caffeine 实现原理(上)
由于社区最大字数限制,本文章将分为两篇,第二篇文章为缓存之美:万文详解 Caffeine 实现原理(下) 大家好,我是 方圆。文章将采用“总-分-总”的结构对配置固定大小元素驱逐策略的 Caffeine 缓存进行介绍&…...
PHP语言的网络编程
PHP语言的网络编程 网络编程是现代软件开发中不可或缺的一部分,尤其是在日益发展的互联网时代。PHP(Hypertext Preprocessor)是一种广泛使用的开源脚本语言,专门用于Web开发。它的灵活性、易用性以及强大的社区支持使得PHP在网络…...
【技巧】优雅的使用 pnpm+Monorepo 单体仓库构建一个高效、灵活的多项目架构
单体仓库(Monorepo)搭建指南:从零开始 单体仓库(Monorepo)是一种将多个相关项目集中管理在一个仓库中的开发模式。它可以帮助开发者共享代码、统一配置,并简化依赖管理。本文将通过实际代码示例࿰…...
算法项目实时推流
1、搭建流媒体服务器 下载mediamtx 2、视频流直推 ffmpeg -stream_loop -1 -i DJI_20250109112715_0002_W.MP4 -r 30 -c:v libx264 -preset ultrafast -f flv rtmp://192.168.100.20:1935/live/test_chengdu1 3、硬件加速 如果硬件支持,可以使用硬件加速编码器&am…...
软件测试—— 接口测试(HTTP和HTTPS)
软件测试—— 接口测试(HTTP和HTTPS) HTTP请求方法GET特点使用场景URL结构URL组成部分URL编码总结 POST特点使用场景请求结构示例 请求标头和响应标头请求标头(Request Headers)示例请求标头 响应标头(Response Header…...
PCL K4PCS算法实现点云粗配准【2025最新版】
目录 一、算法原理1、算法概述2、算法流程3、参考文献二、 代码实现1、原始版本2、2024新版三、 结果展示本文由CSDN点云侠原创,原文链接,首发于:2020年4月27日。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的抄袭狗。 博客长期更新,本文最近一次更新时间为…...
Docker 学习总结(85)—— docker cp 使用总结
前言 在现代软件开发中,Docker 已成为一种流行的容器化技术。无论是在开发、测试还是生产环境中,管理容器内的文件都是一项常见且重要的任务。本文将详细介绍如何使用 docker cp 命令在 Docker 容器与宿主机之间拷贝文件和目录,并结合一些实际使用场景,帮助您更高效地管理…...
《FMambaIR:一种基于混合状态空间模型和频域的方法用于图像恢复》学习笔记
paper:(PDF) FMambaIR: A Hybrid State Space Model and Frequency Domain for Image Restoration 目录 摘要 一、引言 二、相关工作 1、图像恢复 2、频率学习 3、状态空间模型(SSM) 三、框架 1、基本知识 2、整体框架 3、F-Mamba…...
PyQt5 超详细入门级教程上篇
PyQt5 超详细入门级教程 上篇:1-3部分:PyQt5基础与常用控件 第1部分:初识 PyQt5 和安装 1.1 什么是 PyQt5? PyQt5 是 Python 的图形用户界面 (GUI) 框架,它基于强大的 Qt 库。Qt 是一个跨平台的 C 框架,用…...
通信协议—WebSocket
一、WebSocket编程概念 1.1 什么是WebSocket WebSocket 是一种全双工通信协议,允许在客户端(通常是浏览器)和服务器之间建立持久连接,以实现实时的双向通信。它是 HTML5 标准的一部分,相比传统的 HTTP 请求ÿ…...
FFmpeg音视频采集
文章目录 音视频采集音频采集获取设备信息录制麦克风录制声卡 视频采集摄像机画面采集 音视频采集 DirectShow(简称DShow)是一个Windows平台上的流媒体框架,提供了高质量的多媒体流采集和回放功能,它支持多种多样的媒体文件格式&…...
【微机原理与接口技术】定时控制接口
文章目录 8253的引脚和工作方式内部结构和引脚工作方式方式0:计数结束中断方式1:可编程单稳脉冲方式2:周期性负脉冲输出方式3:方波发生器方式4:软件触发的单次负脉冲输出方式5:硬件触发的单次负脉冲输出各种…...
AG32 FPGA 的 Block RAM 资源:M9K 使用
1. 概述 AG32 FPGA 包含了 4 个 M9K 块,每个 M9K 块的容量为 8192 bits,总计为 4 个 M9K(4K bytes)。这使得 AG32 的内部存储非常适合嵌入式应用,能够有效地利用片上资源。 M9K 参数 参考自《AGRV2K_Rev2.0.pdf》。…...
第3天:阿里巴巴微服务解决方案概览
一、阿里巴巴微服务解决方案概述 阿里巴巴在微服务领域贡献了多个开源项目,形成了完整的微服务解决方案,广泛应用于分布式系统开发。其中,Spring Cloud Alibaba 是基于 Spring Cloud 构建的一站式微服务解决方案,集成了多个阿里巴…...
在Ubuntu上安装RabbitMQ教程
1、安装erlang 因为rabbitmq是基于erlang开发的,所以要安装rabbitmq,首先需要安装erlang运行环境 apt-get install erlang执行命令查是否安装成功:erl,疯狂 Ctrlc 就能退出命令行 2、安装rabbitmq 1、查看erlang与rabbitmq版本…...
WPF 引发类型为“System.Windows.Forms.AxHost+InvalidActiveXStateException”的异常 解决办法
本章讲述:引发类型为“System.Windows.Forms.AxHostInvalidActiveXStateException”的异常 解决办法。 这几天在做一个WPF功能时,因为引用了第三方的OCX控件,一般来说一个对象只要实例化就行了, 但是在引用这个控件时就报引发类型为“System.…...
Vue 3中导航守卫(Navigation Guard)结合Axios实现token认证机制
在Vue 3中,导航守卫(Navigation Guard)用于拦截路由的变化,可以在用户访问页面前进行检查。结合Axios进行token认证机制时,我们可以通过导航守卫在路由跳转时,检查用户的认证状态,确保用户有有效…...
代码随想录算法【Day28】
Day28 122.买卖股票的最佳时机 II 最终利润是可以分解的 假如第 0 天买入,第 3 天卖出,那么利润为:prices[3] - prices[0]。 相当于(prices[3] - prices[2]) (prices[2] - prices[1]) (prices[1] - prices[0])。 所以把利润分解为每天…...
【21】Word:德国旅游业务❗
目录 题目 NO1.2.3 NO4 NO5.6 NO7 NO8.9.10.11 题目 NO1.2.3 F12:另存为布局→页面设置→页边距:上下左右选中“德国主要城市”→开始→字体对话框→字体/字号→文本效果:段落对话框→对齐方式/字符间距/段落间距 NO4 布局→表对话框…...
基于 MDL 行情插件的中金所 L1 数据处理最佳实践
本文介绍了如何通过 DolphinDB 的 MDL 插件订阅并处理中金所 Level 1 实时数据。首先,文章简要介绍了 MDL 插件的功能和作用。它是基于 MDL 官方提供的行情数据服务 C SDK(即 TCP 版本 MDL )实现,提供了实时数据获取和处理的能力。…...
在 vscode + cmake + GNU 工具链的基础上配置 JLINK
安装 JLINK JLINK 官网链接 下载安装后找到安装路径下的可执行文件 将此路径添加到环境变量的 Path 中。 创建 JFlash 项目 打开 JFlash,选择新建项目 选择单片机型号 在弹出的窗口中搜索单片机 其他参数根据实际情况填写 新建完成: 接下来设置…...
靶机复现-pikachu靶机文件包含漏洞
本篇文章旨在为网络安全渗透测试靶机复现学习。通过阅读本文,读者将能够对渗透pikachu靶场文件包含漏洞复现有一定的了解 原文学习链接 CSDN博主:One_Blanks主页地址 靶机资源下载 PHPStudy pikachu 一、前言 文件包含漏洞是编程中的一种安全隐患&a…...
如何写出优秀的提示词?ChatGPT官方的六种方法
使用ChatGPT时,提示词(Prompt)的质量直接影响到生成结果的好坏。ChatGPT官方文档中提供了六种优化提示词的方法,这些方法能够帮助用户更好地利用ChatGPT,提升其生成内容的准确性和实用性。本文将结合中文习惯和新的示例…...
【数据结构】顺序表和链表
线性表 线性表是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构,常见的线性表:顺序表、链表、栈、队列、字符串… 线性表在逻辑上是线性结构,也就说是连续的一条直线。但是在物理结构上并不一定是连续的,线…...
StarRocks强大的实时数据分析
代码仓库:https://github.com/StarRocks/starrocks?tabreadme-ov-file StarRocks | A High-Performance Analytical Database 快速开始:StarRocks | StarRocks StarRocks 是一款高性能分析型数据仓库,使用向量化、MPP 架构、CBO、智能物化…...
20250121在Ubuntu20.04.6下使用Linux_Upgrade_Tool工具给荣品的PRO-RK3566开发板刷机
sudo upgrade_tool uf update.img 20250121在Ubuntu20.04.6下使用Linux_Upgrade_Tool工具给荣品的PRO-RK3566开发板刷机 2025/1/21 11:54 百度:ubuntu RK3566 刷机 firefly rk3566 ubuntu upgrade_tool烧写详解 https://wiki.t-firefly.com/Core-3566JD4/03-upgrad…...
python学opencv|读取图像(四十一 )使用cv2.add()函数实现各个像素点BGR叠加
【1】引言 前序已经学习了直接在画布上使用掩模,会获得彩色图像的多种叠加效果,相关文章链接为: python学opencv|读取图像(四十)掩模:三通道图像的局部覆盖-CSDN博客 这时候如果更进一步,直接…...
150 Linux 网络编程6 ,从socket 到 epoll整理。listen函数参数再研究
一 . 只能被一个client 链接 socket例子 此例子用于socket 例子, 该例子只能用于一个客户端连接server。 不能用于多个client 连接 server socket_server_support_one_clientconnect.c /* 此例子用于socket 例子, 该例子只能用于一个客户端连接server。…...
学习ASP.NET Core的身份认证(基于JwtBearer的身份认证9)
测试数据库中只有之前记录温湿度及烟雾值的表中数据较多,在该数据库中增加AppUser表,用于登录用户身份查询,数据库表如下所示: 项目中安装SqlSugarCore包,然后修改控制器类的登录函数及分页查询数据函数ÿ…...
【数据分析(二)】初探 Pandas
目录 引言1. 基本数据结构1.1. Series 的初始化和简单操作1.2. DataFrame 的初始化和简单操作1.2.1. 初始化与持久化1.2.2. 读取查看1.2.3. 行操作1.2.4. 列操作1.2.5. 选中筛查 2. 数据预处理2.0. 生成样例表2.1. 缺失值处理2.2. 类型转换和排序2.3. 统计分析 3. 数据透视3.0.…...
大数据与AI驱动的商业查询平台:企业市场拓展的变革引擎
在竞争白热化的商业环境里,企业对准确市场信息的高效获取能力,直接关系到业务拓展的成败。商业查询平台借助大数据和人工智能技术,为企业提供精准客户筛选、市场拓展分析以及风险评估服务,正逐渐成为企业市场开拓的得力助手。本文…...
k8s namespace绑定节点
k8s namespace绑定节点 1. apiserver 启用准入控制 PodNodeSelector2. namespace 添加注解 scheduler.alpha.kubernetes.io/node-selector3. label node 1. apiserver 启用准入控制 PodNodeSelector vim /etc/kubernetes/manifests/kube-apiserver.yaml spec:containers:- co…...
ChatGPT被曝存在爬虫漏洞,OpenAI未公开承认
OpenAI的ChatGPT爬虫似乎能够对任意网站发起分布式拒绝服务(DDoS)攻击,而OpenAI尚未承认这一漏洞。 本月,德国安全研究员Benjamin Flesch通过微软的GitHub分享了一篇文章,解释了如何通过向ChatGPT API发送单个HTTP请求…...
2024微短剧行业生态洞察报告汇总PDF洞察(附原数据表)
原文链接: https://tecdat.cn/?p39072 本报告合集洞察从多个维度全面解读微短剧行业。在行业发展层面,市场规模与用户规模双增长,创造大量高收入就业岗位并带动产业链升级。内容创作上,精品化、品牌化趋势凸显,题材走…...
【JavaSE】(8) String 类
一、String 类常用方法 1、构造方法 常用的这4种构造方法:直接法,或者传参字符串字面量、字符数组、字节数组。 在 JDK1.8 中,String 类的字符串实际存储在 char 数组中: String 类也重写了 toString 方法,所以可以直…...
算法竞赛之差分进阶——等差数列差分 python
目录 前置知识进入正题实战演练 前置知识 给定区间 [ l, r ],让我们把数组中的[ l, r ] 区间中的每一个数加上c,即 a[ l ] c , a[ l 1 ] c , a[ l 2] c , a[ r ] c; 怎么做?很简单,差分一下即可 还不会的小伙伴点此进入学习 进入正题 …...