位置: IT常识 - 正文

Vue3中的watch监听(vue中watch监听对象的变化)

编辑:rootadmin
Vue3中的watch监听

目录

一、监听基础ref类型

1、监听单个ref数据

2、 监听多个ref数据

二、监听reactive类型

1、监听对象中单个属性

 2、监听对象中多个属性

  3、同时监听ref基本类型数据和reactive对象中的属性

 4、监听整个对象

  5、监听对象中值为对象的属性

三、watchEffect


一、监听基础ref类型1、监听单个ref数据

推荐整理分享Vue3中的watch监听(vue中watch监听对象的变化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue watch监听localstorage变化,vue监听watch监听全局对象,vue watch监听,vue的watch监听props,vue的watch监听props,vue watch监听,vue3中的watch监听路由,vue中watch监听对象的变化,内容如对您有帮助,希望把文章链接给更多的朋友!

2、 监听多个ref数据

二、监听reactive类型1、监听对象中单个属性

监听 user.more.iPhone 属性,那么只有当iPhone属性发生变更时,才会触发 watch 方法,其他属性变更不会触发 watch 方法。注意,此时的第一个参数是一个箭头函数。

 2、监听对象中多个属性

  3、同时监听ref基本类型数据和reactive对象中的属性

 

 4、监听整个对象

当监听整个对象时,只要这个对象有任何修改,那么就会触发 watch 方法。无论是其子属性变更(如 user.name),还是孙属性变更(如 user.more.iPhone)...,都是会触发 watch 方法的。

Vue3中的watch监听(vue中watch监听对象的变化)

  5、监听对象中值为对象的属性

方式1:不用箭头函数,则可以不用deep:true

 方式二【推荐用箭头函数】:用箭头函数时,则必须加上{deep:true}才能触发监听

我们发现newValue和oldValue的值都是一样的, 这是因为它们的引用指向同一个对象/数组

 推荐用箭头函数监听对象的原因就是,我们可以通过以下方式来使新旧值不一样

如果直接监听对象,别说监听对象的改变了,直接原对象都监听不到,如下:

 总结:监听对象时,如果不关心旧值,那么直接监听对象更方便,因为不用手动设置deep为true;如果关心旧值,那么需要使用箭头函数,并序列化,设置deep:true

三、watchEffect

不用指明监视哪个属性,监视的回调用到哪个属性,就去监视哪个属性

watch可以访问新值和旧值,watchEffect不能访问。watch需要指明监听的对象,也需要指明监听的回调。watchEffect不用指明监视哪一个属性,监视的回调函数中用到哪个属性,就监视哪个属性。watch只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行。

<template> <div>nums:<input v-model="nums" /></div> <div>user.age:<input v-model="user.age" /></div> <button @click="user.more.iPhone = 22222">改变more</button></template><script setup>const nums = ref(1);const user = reactive({ name: "张三", age: 23, more: { iPhone: 1111, address: "aaa", },});watchEffect(() => { const x1 = nums.value; const x2 = user.age; const x3 = user.more.iPhone; console.log("watchEffect监听的回调执行了...");});watchEffect(() => { console.log("222222222...");});</script>
本文链接地址:https://www.jiuchutong.com/zhishi/293750.html 转载请保留说明!

上一篇:通往海滩的木板路,德国叙尔特岛 (© Kerstin Bittner/Westend61/Offset by Shutterstock)(通往海滩的木板有什么用)

下一篇:Antv/X6图编辑器的应用——流程图实现(anjedi编辑器)

  • 华为手机长截屏怎么操作(华为手机长截屏怎么截屏)

    华为手机长截屏怎么操作(华为手机长截屏怎么截屏)

  • 雷蛇键盘怎么切换灯光(雷蛇键盘怎么切换配置文件)

    雷蛇键盘怎么切换灯光(雷蛇键盘怎么切换配置文件)

  • 苹果关机怎么查找定位手机(苹果关机怎么查定位)

    苹果关机怎么查找定位手机(苹果关机怎么查定位)

  • 小米10pro手机是几倍光学变焦(小米10pro是10s吗)

    小米10pro手机是几倍光学变焦(小米10pro是10s吗)

  • word怎么设置三级标题(word怎么设置三线表格式)

    word怎么设置三级标题(word怎么设置三线表格式)

  • 淘宝省钱红包邀请制怎么开通(淘宝省钱红包怎么开通自动续费)

    淘宝省钱红包邀请制怎么开通(淘宝省钱红包怎么开通自动续费)

  • 网易云背景为什么换不了(网易云背景为什么变成灰色的了)

    网易云背景为什么换不了(网易云背景为什么变成灰色的了)

  • 影响快手生态环境什么意思(快手生态环境包含哪些)

    影响快手生态环境什么意思(快手生态环境包含哪些)

  • 手机摔出黑块怎么消除(手机摔出黑块逐渐减少)

    手机摔出黑块怎么消除(手机摔出黑块逐渐减少)

  • 抖音发布的视频别人看不到(抖音发布的视频播放量有收益吗)

    抖音发布的视频别人看不到(抖音发布的视频播放量有收益吗)

  • 苹果通话记录自动没了(苹果通话记录自动清除怎么关闭)

    苹果通话记录自动没了(苹果通话记录自动清除怎么关闭)

  • 苹果充电头中间有裂纹怎么办(苹果充电头有个孔)

    苹果充电头中间有裂纹怎么办(苹果充电头有个孔)

  • win10电脑无法识别耳机(win10电脑无法识别手机)

    win10电脑无法识别耳机(win10电脑无法识别手机)

  • 更换系统桌面什么意思(怎么更换系统桌面)

    更换系统桌面什么意思(怎么更换系统桌面)

  • 华为量尺寸功能在哪里(华为手机怎么可以量尺寸)

    华为量尺寸功能在哪里(华为手机怎么可以量尺寸)

  • wan端口是什么意思(wan端口都是0)

    wan端口是什么意思(wan端口都是0)

  • qq建群失败什么原因(qq群建不了)

    qq建群失败什么原因(qq群建不了)

  • 淘宝店家不发货有什么惩罚(淘宝店家不发货可以申请赔偿吗)

    淘宝店家不发货有什么惩罚(淘宝店家不发货可以申请赔偿吗)

  • 手机qq日志怎么删除(手机QQ日志怎么删除)

    手机qq日志怎么删除(手机QQ日志怎么删除)

  • mate30pro怎么设置熄屏快呼(mate30pro怎么设置来电闪光灯)

    mate30pro怎么设置熄屏快呼(mate30pro怎么设置来电闪光灯)

  • oppoa1有呼吸灯吗(oppoa91手机有没有呼吸灯)

    oppoa1有呼吸灯吗(oppoa91手机有没有呼吸灯)

  • 抖音直播时点亮是什么意思(抖音直播时点亮星星)

    抖音直播时点亮是什么意思(抖音直播时点亮星星)

  • 苹果可以免费换电池吗(苹果可以免费换屏幕吗)

    苹果可以免费换电池吗(苹果可以免费换屏幕吗)

  • qq封了7天怎么能解除(qq封了7天怎么能解封)

    qq封了7天怎么能解除(qq封了7天怎么能解封)

  • 淘宝店标如何做(淘宝店铺标志怎样设计呀?我来教你)

    淘宝店标如何做(淘宝店铺标志怎样设计呀?我来教你)

  • 新版Win10中,如何仅修改部分文本大小

    新版Win10中,如何仅修改部分文本大小

  • Spring Boot 中如何使用 Spring Cloud Alibaba 实现微服务治理(spring bootcsdn)

    Spring Boot 中如何使用 Spring Cloud Alibaba 实现微服务治理(spring bootcsdn)

  • 一般纳税人开普票税率是3%还是13%
  • 土地入账成本包含哪些
  • 预收货款需要缴纳消费税吗?缴纳消费税的时间应该是?
  • 开具红字专用发票的条件
  • 费用计入管理费用与销售费用的区别
  • 度假村功能
  • 怎么确定印花税申报成功
  • 租赁合同交税一般交多少钱
  • 小规模纳税人季报还是月报?
  • 小规模纳税人免税会计分录
  • 无形资产摊销起止时间
  • 公司注销后会计凭证保管年限
  • 运费开进发票
  • 发票缴税怎么交的
  • 营改增后建筑公司账务处理
  • 租金收入未收到 税法规定
  • 增值税专用发票几个点
  • 营改增的优惠政策
  • 新企业所得税法规定的企业包括
  • 搅拌站需要什么土地
  • 劳务报酬属于公司员工么
  • 店内上保险退保
  • 会计相关行业的工作职责和招聘要求
  • 年度中期是几月份
  • 在两处取得收入
  • 税收分类编码选错会怎样
  • windows伪装电脑mac
  • 在win7系统中如何让电脑恢复出厂设置方法
  • 电脑屏发黄怎么调正常哪
  • 进口关税和进口增值税怎么算
  • 子公司转为分公司,是不是需要缴纳土地增值税
  • 公司所有费用都让一人报销
  • thinkphp ide
  • cpu版本的pytorch可以运行LSgan嘛
  • 应收票据利息会计科目
  • 稿酬所得计入什么科目
  • 详解php字符串替换
  • 工程项目合同签订
  • 栖息在树林中
  • Laravel5.5新特性之友好报错以及展示详解
  • Chrome谷歌浏览器网页
  • framework3.5怎么打开
  • 劳务费不足800如何入账
  • 完美ui
  • mysql 数据库
  • centos安装nmtui
  • 库存不足怎么处理
  • 不得抵扣增值税的情形
  • 旅行社增值税2020
  • 长期股权投资如何确认
  • 土地的入账科目
  • 购电脑怎么入账
  • 开发成本贷方负数表示什么
  • 商贸企业固定资产可以一次性扣除吗?
  • 财务工作交接的通知
  • 会计帐本分为哪几类
  • solaris挂载硬盘
  • mac怎么切换输入法
  • ghost后恢复数据
  • 苹果mac怎样
  • ubuntu配置vsftpd
  • windows免费升级win10
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • jquery 刷新div
  • linux rpm -i
  • cocos2dx openGL
  • nodequery
  • jquery如何实现双向绑定
  • a标签的href点击怎么不跳转
  • js变量作用域
  • js获取鼠标点击位置
  • 支付境外服务费需要缴纳哪些税费
  • 卷烟批发环节的税率
  • 税务总局各司领导名单
  • 契税怎样才能抵扣个税
  • 江苏省定额规则
  • 泰兴市地方税务局
  • 企业筹建期间发生的费用应计入什么账户
  • 建筑公司报销流程
  • 如何查询自己是否被起诉了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设