Vue3 watch 的使用,如何监听一个对象中的属性值的变化 vue3 + ts + vite

news2024/10/5 16:24:33

Vue3 watch 的使用,如何监听一个对象中的属性值的变化

由 vue2 转到 vue3 + ts + vite 之后都不会写这些玩意了。搜了下,找到了答案:

vue2 的 watch

export default {
	watch: {
		'$route.query.id'(newValue){
			// 可以这样监听路由的变化
		},
		'formUser.address'(){
			// 可以这样监听一个对象内的属性的变化
		}
	}
}

vue3 + ts + vite 的 watch

vue3 的 watch 改成了,监听的对象是 ref() 值,或者一个返回实际值的 方法

<script lang="ts" setup>
const formUser = ref({
	address: '一个地方',
	age: 34
})

watch(formUser, newValue => {
	// 监听 formUser 的变化
	// newValue 的值就是 formUser 的真实值 === formUser.value
})
watch(()=> formUser.value.address, newValue => {
	// 监听 formUser.adress 值的变化
	// newValue === formUser.value.adress
})

</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

漏洞分析|jeecg-boot 未授权SQL注入漏洞(CVE-2023-1454)

1.漏洞描述 JeecgBoot的代码生成器是一种可以帮助开发者快速构建企业级应用的工具&#xff0c;它可以通过一键生成前后端代码&#xff0c;无需写任何代码&#xff0c;让开发者更多关注业务逻辑。 jeecg-boot 3.5.0版本存在SQL注入漏洞&#xff0c;该漏洞源于文件 jmreport/qu…

华为鸿蒙运行Hello World

前言&#xff1a; 从11月中旬开始通过B站帝心接触鸿蒙&#xff0c;至今一个半月左右不到&#xff0c;从小白到入坑&#xff0c;再到看官网案例&#xff0c;分析案例&#xff0c;了解技术点&#xff0c;还需要理清思路&#xff0c;再写博客&#xff0c;在决定写 &#xff1c;Har…

七、HTML 文本格式化

一、HTML 文本格式化 加粗文本斜体文本电脑自动输出 这是 下标 和 上标 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>HTML文本格式化</title> </head><body><b>加粗文本</b><br>…

商用密码应用安全评估实施方案(50页PPT)

商用密码应用安全评估:简称密评&#xff0c;是指在采用商用密码技术、产品和服务集成建设的网络和信息系统中&#xff0c;对其密码应用的合规性、正确性和有效性进行评估的过程。这一评估过程是根据《中华人民共和国密码法》等相关法规和标准进行的。 合规性评估主要是检查密码…

Premiere Pro教程(全)

项目面板 素材箱 工具面板 轨道选择工具 波纹编辑工具 视频裁剪工具 时间轴面板 时间轴相关快捷键 素材编辑 源面板 插入 节目面板 基本声音 效果面板 效果快捷键 视频效果 视频过渡 全部面板 通用快捷键 效果控件 效果控件概述 码表 运动 不透明度 字幕组 字幕…

7+WGCNA+机器学习+泛癌生信思路,非肿瘤也能结合泛癌分析

今天给同学们分享一篇生信文章“Analysis and Experimental Validation of Rheumatoid Arthritis Innate Immunity Gene CYFIP2 and Pan-Cancer”&#xff0c;这篇文章发表在Front Immunol期刊上&#xff0c;影响因子为7.3。 结果解读&#xff1a; DEG筛选和数据预处理 数据在…

Vue3复习笔记

目录 挂载全局属性和方法 v-bind一次绑定多个值 v-bind用在样式中 Vue指令绑定值 Vue指令绑定属性 动态属性的约束 Dom更新时机 ”可写的“计算属性 v-if与v-for不建议同时使用 v-for遍历对象 数组变化检测 事件修饰符 v-model用在表单类标签上 v-model还可以绑定…

HTML5+CSS3④——选择器、复合选择器

目录 选择器 标签选择器 类选择器 id选择器 通配符选择器 复合选择器 后代选择器 子代选择器 并集选择器 交集选择器 选择器 标签选择器 类选择器 id选择器 通配符选择器 复合选择器 后代选择器 子代选择器 并集选择器 交集选择器

dns主从搭建测试

一、DNS的介绍 1、DNS&#xff1a;Domain Name System&#xff0c;域名系统。将主机名解析为IP地址的过程&#xff0c;完成从域名到主机识别ip地址之间的转换&#xff0c;如&#xff1a;www.baidu.com, 其中 www为主机名&#xff0c;baidu.com为域名。 2、DNS无论是走TCP,还是走…

Latex使用BibTeX添加参考文献,保持专有名词原格式,如全部大写方法

一、背景 当我们使用Latex写文章时&#xff0c;通常使用BibTeX的方式添加参考文献&#xff0c;这种方式非常方便&#xff0c;可以使用期刊定义好的参考文献格式。但有时&#xff0c;某篇参考文献题目中含有专有名词时&#xff0c;如DMPs&#xff0c;参考文献会自动将其转为小写…

密码学:一文读懂非对称密码体制

文章目录 前言非对称密码体制的保密通信模型私钥加密-公钥解密的保密通信模型公钥加密-私钥解密的保密通信模型 复合式的非对称密码系统散列函数数字签名数字签名满足的三个基本要求先加密还是先签名&#xff1f;数字签名成为公钥基础设施以及许多网络安全机制的基础什么是单向…

【数据结构】七、图

一、概念 图&#xff1a;记为G(V,E) 有向图&#xff1a;每条边都有方向 无向图&#xff1a;边无方向 完全图&#xff1a;每个顶点都与剩下的所有顶点相连 完全有向图有n(n-1)条边&#xff1b;完全无向图有n(n-1)/2条边 对于完全无向图&#xff0c;第一个节点与剩下n-1个节点…

本地生活服务再起波澜,这些数据告诉你该选哪些行业?

当地生活领域的竞争异常激烈&#xff0c;市场形势也在发生变化&#xff0c;以"变革、拓展、创新、尝试"为中心的当地生活领域每天都有新的故事。艾瑞咨询的数据显示&#xff0c;2020年中国当地生活服务市场规模达到19.5万亿元&#xff0c;预计到2025年&#xff0c;这…

众和策略股市行情分析:为什么不建议在登记日前买入股票?

为什么不主张在挂号日前买入股票&#xff1f; 之所以不主张在挂号日前买入股票&#xff0c;是因为挂号日之后股票会除息&#xff0c;从而使得股价跌落。而挂号日前买入虽说可以享有当期分红&#xff0c;但持股达不到一定年限的&#xff0c;分红是需要付税的&#xff0c;所以不…

常用环境部署(十三)——GitLab整体备份及迁移

一、GitLab备份 注意&#xff1a;由于我的GitLab是docker安装的&#xff0c;所以我的操作都是在容器内操作的&#xff0c;大家如果不是用docker安装的则直接执行命令就行。 1、Docker安装GitLab 链接&#xff1a;常用环境部署(八)——Docker安装GitLab-CSDN博客 2、GitLab备…

DNS测试和管理工具

一、dig 命令 说明&#xff1a; &#xff08;1&#xff09;dig只用于测试dns系统&#xff0c;不会查询hosts文件进行解析。 &#xff08;2&#xff09;加"server-ip"&#xff1a;根据指定的DNS服务器来解析&#xff0c;绕过了本地解析库中设置的DNS服务器。 &…

Model::unguard()的作用

这是在生成假数据时碰见的&#xff0c;浅查了一下 Model::unguard() 是 Laravel 框架中的一个方法&#xff0c;它的作用是取消对 Eloquent 模型的属性赋值的安全性保护。 在默认情况下&#xff0c;Laravel 的 Eloquent 模型会对属性赋值做一些安全性检查&#xff0c;例如防止…

实现区域地图散点图效果,vue+echart地图+散点图

需求&#xff1a;根据后端返回的定位坐标数据实现定位渲染 1.效果图 2.准备工作,在main.js和index.js文件中添加以下内容 main.js app.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: sRDDfAKpCSG5iF1rvwph4Q95M…

ARM CCA机密计算架构软件栈之软件组件介绍

在本节中,您将了解Arm CCA的软件组件,包括Realm World和Monitor Root World。以下图表展示了Arm CCA系统中的软件组件: 在这个图表中,世界之间的边界显示为粗虚线。由较高权限的软件强制执行的较低权限软件组件之间的边界显示为细虚线。例如,非安全EL2处的虚拟机监视器强制…

QT上位机开发(会员管理软件)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们学习了ini文件的解析办法&#xff0c;通过QSettings类就可以很轻松地访问ini文件里面的数据。除了ini文件之外&#xff0c;另外一种经常出…