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

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

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

vue2 的 watch

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

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.mzph.cn/news/593524.shtml

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

相关文章

vue 实现拐弯时间线,弯曲时间线,弯曲任务步骤条

需求&#xff1a; 实现可拐弯的步骤条功能 实现后效果如下&#xff1a; 代码部分&#xff1a; 创建步骤条组件Steps.vue <template><div><divstyle"width: 100%; display: flex; position: relative; margin-top: 20px"><div style"wi…

为什么大学c语言课不顺便教一下Linux,Makefile

为什么大学c语言课不顺便教一下Linux&#xff0c;Makefile&#xff0c;git&#xff0c;gdb等配套工具链呢? 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「Linux的资料从专业入门到高级教程工具包」&…

五、Spring AOP面向切面编程(基于注解方式实现和细节)

本章概要 Spring AOP底层技术组成初步实现获取通知细节信息切点表达式语法重用&#xff08;提取&#xff09;切点表达式环绕通知切面优先级设置CGLib动态代理生效注解实现小结 5.5.1 Spring AOP 底层技术组成 动态代理&#xff08;InvocationHandler&#xff09;&#xff1a;…

RocketMQ5.0延时消息时间轮算法

前言 RocketMQ 相较于其它消息队列产品的一个特性是支持延时消息&#xff0c;也就是说消息发送到 Broker 不会立马投递给消费者&#xff0c;要等待一个指定的延迟时间再投递&#xff0c;适用场景例如&#xff1a;下单后多长时间没付款系统自动关闭订单。 RocketMQ 4.x 版本的延…

一文搞懂手机卡的定向流量到底是什么!

最近有一些小伙伴对于手机卡流量中包含的定向流量这个概念不是很明白&#xff0c;而且也不知道具体如何使用&#xff0c;今天这个视频&#xff0c;葫芦弟就仔细给大家讲解一下&#xff0c;希望能解开小伙伴们心中的疑惑。废话不多说&#xff0c;我们直接进入正题&#xff01; 首…

第十四章 :案例课:部暑KVM虚拟化平台

[rootLinux01 ~]# mount /dev/cdrom /mnt //挂载安装KVM需要的软件 [rootLinux01 ~]# yum -y install qemu-kvm-tools [rootLinux01 ~]# yum -y install qemu-kvm [rootLinux01 ~]# yum -y install virt-install [rootLinux01 ~]# yum -y install qemu-img [rootLinux01 ~]#…

Oracle 日志路径查询介绍

数据库日志分析详解&#xff1a;  ORACEL RAC 体系架构分析  Oracle RAC 包含GI(Grid Infrastructure) 集群软件与Oracle数据库组成。  GI包含两个最主要的组件&#xff1a;Clusterware集群软件和ASM存储软件&#xff0c;这两个软件提供数据库高可用能力。  …

k8s之Pod的基础(上)

什么是pod&#xff1f; pod是k8s中最小的资源管理组件 pod也是最小运行容器化的应用的资源管理对象 pod是一个抽象的概念&#xff0c;可以理解为一个或者多个容器化应用的集合 在一个pod当中运行一个容器时最常用的方式 在一个pod当中同时运行多个容器&#xff0c;在一个po…

Excel·VBA二维数组组合函数的应用实例之概率计算

看到一个视频《李永乐老师的抖音 - 骰子概率问题》&#xff0c;计算投出6个骰子恰好出现1、2、3、4、5、6这6个点数的概率 李永乐老师的计算方法是&#xff0c;第1个概率为1即6/6&#xff0c;第2个不与之前相同的概率为5/6&#xff0c;第3个同理概率为4/6&#xff0c;因此该问…

快速实现前后端表单交互(minui)

&#xff08;1&#xff09;使用minui快速生成表单 &#xff08;2&#xff09;修改样式&#xff0c;将生成的html文件发送给后端 &#xff08;3&#xff09;前后端交互&#xff08;后端如何处理不太清楚&#xff09; 表单初始化&#xff1a;新增修改&#xff08;包括查看&…

【Win】没设置Windows账户密码,如何远程登录

1、按下Win&#xff0c;输入本地&#xff0c;打开本地安全策略 2、找到这个 3、双击打开&#xff0c;改成已禁用 4、正常重新启动一次或者开关机一次永久生效。 - 我第一次弄完死机了&#xff0c;再开机发现没生效

安科瑞余压监控系统在住宅小区的应用方案——安科瑞 顾烊宇

【摘要】&#xff1a;本文分析了火灾发生时人员伤亡的主要原因——烟雾&#xff0c;并针对该原因提供切实可靠的系统应用解决方案&#xff0c;并通过具体案例&#xff0c;从设计依据、产品选型、系统组网、现场安装等方式介绍余压监控系统&#xff0c;希望可以在火灾发生时较大…

Blender:从新手到专家的全方位指南

Blender&#xff0c;这款强大的开源3D建模和渲染软件&#xff0c;已经成为了CG行业的标准工具之一。它不仅拥有丰富的教程资源&#xff0c;而且还在不断发展和完善中。尽管Blender的教程主要集中在国外网站和YouTube上&#xff0c;但其全面的功能和易用性使它成为许多人的首选工…

贝莱德等巨头将通过最终考验!ETF获批是涨是跌?交易数据背后的博弈信号已经显现!

还记得摩根大通&#xff08;(J.P.Morgan&#xff09;首席执行长杰米-戴蒙&#xff08;Jamie Dimon&#xff09;说「如果他是政府&#xff0c;他就会关闭比特币」&#xff0c;加密货币的唯一「真正用途是犯罪、贩毒、洗钱和避税」吗&#xff1f; 然而&#xff0c;最新消息显示&a…

【2024.01.03】转行小白-刷css面试题01

总结 1.margin 负值问题 margin-top 和 margin-left 负值&#xff0c;元素向上、向左移动&#xff0c;自己动margin-right 负值&#xff0c;右侧元素左移&#xff0c;自身不受影响&#xff0c;别人动margin-bottom 负值&#xff0c;下方元素上移&#xff0c;自身不受影响 &am…

Certum ev多域名证书的优势

多域名证书作为一种能够为多个域名提供安全保护的证书类型&#xff0c;越来越受到企业的青睐。Certum作为一个成立了二十几年的CA认证机构&#xff0c;旗下的EV多域名SSL证书产品已经保护了多家企业的网站。Certum旗下的EV多域名证书作为一种能够为多个域名提供安全保护的证书类…

【C语言】Linux socket 编程

一、Socket 通信过程 在 Linux 系统中&#xff0c;socket 是一种特殊的文件描述符&#xff0c;用于在网络中的不同主机间或者同一台主机中的不同进程间进行双向通信。它是通信链路的端点&#xff0c;可以看作是网络通信的接口。Socket 通信过程主要分为以下几个步骤&#xff1a…

RocketMQ5.0顺序消息设计实现

前言 顺序消息是 RocketMQ 提供的一种高级消息类型&#xff0c;支持消费者按照发送消息的先后顺序获取消息&#xff0c;从而实现业务场景中的顺序处理。 顺序消息的顺序关系通过消息组&#xff08;MessageGroup&#xff09;判定和识别&#xff0c;发送顺序消息时需要为每条消息…

RocketMQ5.0Pop消费模式

前言 RocketMQ 5.0 消费者引入了一种新的消费模式&#xff1a;Pop 消费模式&#xff0c;目的是解决 Push 消费模式的一些痛点。 RocketMQ 4.x 之前&#xff0c;消费模式分为两种&#xff1a; Pull&#xff1a;拉模式&#xff0c;消费者自行拉取消息、上报消费结果Push&#x…

分布式(8)

目录 36.什么是TCC&#xff1f; 37.分布式系统中常用的缓存方案有哪些&#xff1f; 38.分布式系统缓存的更新模式&#xff1f; 39.分布式缓存的淘汰策略&#xff1f; 40.Java中定时任务有哪些&#xff1f;如何演化的&#xff1f; 36.什么是TCC&#xff1f; TCC&#xff08…