位置: 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编辑器)

  • vivos7手机有3.5mm耳机孔吗(vivos7手机有多长)

    vivos7手机有3.5mm耳机孔吗(vivos7手机有多长)

  • 电脑桌面图标如何移动(电脑桌面图标如何自动补位)

    电脑桌面图标如何移动(电脑桌面图标如何自动补位)

  • 手机四摄像头有什么用(手机四摄像头是什么意思)

    手机四摄像头有什么用(手机四摄像头是什么意思)

  • 苹果11按键音怎么关闭(苹果11按键音怎么调大声)

    苹果11按键音怎么关闭(苹果11按键音怎么调大声)

  • 手机面部识别用照片可以吗(手机面部识别用人的照片)

    手机面部识别用照片可以吗(手机面部识别用人的照片)

  • 联想笔记本主板电池在哪(联想笔记本主板型号怎么看)

    联想笔记本主板电池在哪(联想笔记本主板型号怎么看)

  • 笔记本尺寸有哪些(笔记本尺寸哪里看)

    笔记本尺寸有哪些(笔记本尺寸哪里看)

  • 抖音里点赞的视频怎么批量删除(抖音里点赞的视频删除了还有赞吗)

    抖音里点赞的视频怎么批量删除(抖音里点赞的视频删除了还有赞吗)

  • vivox30网速太慢怎么解决(vivox30网速卡怎么回事)

    vivox30网速太慢怎么解决(vivox30网速卡怎么回事)

  • 手机登两个微信怎么登(咋样一个手机登两个微信)

    手机登两个微信怎么登(咋样一个手机登两个微信)

  • iphone11开热点安卓连不上(苹果11热点打开)

    iphone11开热点安卓连不上(苹果11热点打开)

  • 监控录像回放没有录像怎么回事(监控录像回放没有声音怎么回事莹石云)

    监控录像回放没有录像怎么回事(监控录像回放没有声音怎么回事莹石云)

  • 手机软件打不开(苹果手机软件打不开)

    手机软件打不开(苹果手机软件打不开)

  • 抖音的收货地址在哪里设置(抖音收货地址怎么填)

    抖音的收货地址在哪里设置(抖音收货地址怎么填)

  • ps里怎么调整图像大小(ps里怎么调整图片大小还保持清晰)

    ps里怎么调整图像大小(ps里怎么调整图片大小还保持清晰)

  • 乐视手机怎么删除自带软件(乐视手机怎么删除)

    乐视手机怎么删除自带软件(乐视手机怎么删除)

  • oppor15长度多少厘米(oppor15有多长)

    oppor15长度多少厘米(oppor15有多长)

  • qq如何设置彩色昵称(qq如何设置彩色id)

    qq如何设置彩色昵称(qq如何设置彩色id)

  • 无线网电视怎么连接(无线网电视怎么安装)

    无线网电视怎么连接(无线网电视怎么安装)

  • iphonex相机专业模式在哪(苹果x怎样调出专业相机)

    iphonex相机专业模式在哪(苹果x怎样调出专业相机)

  • 电信4g+hd什么意思(电信4g+hd是什么意思)

    电信4g+hd什么意思(电信4g+hd是什么意思)

  • 微信里朋友在看是什么意思(微信里朋友在看的信息是从哪儿来的)

    微信里朋友在看是什么意思(微信里朋友在看的信息是从哪儿来的)

  • 树莓派4发布时间(树莓派4b 发布)

    树莓派4发布时间(树莓派4b 发布)

  • 苹果掌阅怎么导入本地(苹果怎么把掌阅的书导出来)

    苹果掌阅怎么导入本地(苹果怎么把掌阅的书导出来)

  • 华为nova5pro屏幕供应商(华为nova5pro屏幕多大)

    华为nova5pro屏幕供应商(华为nova5pro屏幕多大)

  • ipad怎么控制孩子使用时间(ipad怎么控制孩子使用游戏)

    ipad怎么控制孩子使用时间(ipad怎么控制孩子使用游戏)

  • 苹果xs max有指纹锁吗(苹果xs max有指纹识别吗)

    苹果xs max有指纹锁吗(苹果xs max有指纹识别吗)

  • 快手礼物猫粮怎么获得(快手礼物猫粮怎么送)

    快手礼物猫粮怎么获得(快手礼物猫粮怎么送)

  • 怎么更新电脑系统?(怎么更新电脑系统win10)

    怎么更新电脑系统?(怎么更新电脑系统win10)

  • 2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤(图文详解)(农民影视2023 最新版)

    2023 最新版IntelliJ IDEA 2023.1创建Java Web 项目详细步骤(图文详解)(农民影视2023 最新版)

  • 薰衣草田,英国牛津 (© Peter Greenway/EyeEm/Getty Images)(薰衣草 英国)

    薰衣草田,英国牛津 (© Peter Greenway/EyeEm/Getty Images)(薰衣草 英国)

  • 计提工资年底余额所得税处理
  • 非税缴税是什么意思
  • 研发费用加计扣除是什么意思啊
  • 印花税怎么计提和缴纳
  • 发票的规格和型号有哪些
  • 维修费收入怎么结转成本
  • 小微企业所得税税率2.5% 10% 25%
  • 销售出库发票会计分录怎么做?
  • 免税的苗木发票抵扣税费怎么算
  • 员工工资的扣点
  • 印花税已经缴纳了但是还未申报
  • 携程电子发票可以发到QQ邮箱吗
  • 建筑行业劳务费开发票可以开工程款吗?
  • 再生资源税率多少合理
  • 税审计入什么科目?
  • 开票资料电话可以查到吗
  • 子公司与总公司的关系说明书
  • 公司发生的费用需要交税吗
  • 太阳能真空管和普通管的区别
  • 节能控制模块
  • 付款凭证和记账凭证一样吗
  • 同期比较百分比如何计算
  • 审计调账后企业怎么处理
  • 以前年度的费用可以入在当年吗?
  • 医疗机构免征增值税如何申报
  • 银行扣的短信费银行给开发票吗
  • 电子承兑转出后多久到账
  • 制造业企业存货管理论文
  • 蓝屏代码0xc000000f
  • 应付职工薪酬计提数是借方还是贷方
  • 固定资产 出售
  • 旅行社代订的住宿费可以抵扣吗
  • 如何防止别人蹭热点
  • 没有取得发票的成本可以税前扣除吗
  • 给客户赠送的礼物叫什么
  • 在建工程盘盈计入什么
  • vue3使用教程
  • 免征增值税怎么入账
  • 应纳税所得额100-300万税率
  • 往来款的意思
  • 调整以前年度亏损
  • SQL Server 2016 TempDb里的显著提升
  • 研发费用资本化条件有哪些
  • 增值税发票已抵扣怎么红冲
  • 设备融资租赁如何算综合利率
  • 更正会计差错的方法
  • 个体户办营业执照网上怎么申请
  • 现金支票存根联丢失怎么办
  • 不用人工
  • 个人支付宝开票一年可以开多少
  • 个人公积金计入什么科目
  • mysql -ne
  • sql储存过程
  • jdbc连接MySQL实验总结
  • xp附件游戏
  • 如何重设路由器密码怎么办
  • 怎么在centos中创建一个文件
  • explorer.exe中文叫什么
  • windowsxp怎么开机
  • centos如何删除bond
  • win10无法uefi
  • win7系统计算机管理打不开
  • linux命令使用方法
  • win10更新已经下载好了能删除吗
  • 深入理解python特性pdf百度云
  • unity3d初学者教程视频
  • opengl oes纹理
  • jQuery扩展+xml实现表单验证功能的方法
  • bat修改ip地址
  • html用div来写表格
  • 表格高级使用技巧视频
  • jquery旋转动画
  • 彻底解决老鼠进发动机舱
  • python中的print语句
  • 发票怎能打印
  • 四川省国税局一处处长
  • 我的宁夏灵活就业缴费失败
  • 嘉定办证中心营业时间
  • 收到12366的短信
  • 美国海外公司每年利润
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设