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

  • 百度贴吧怎样发帖才能获取更多流量?(百度贴吧怎样发视频)

    百度贴吧怎样发帖才能获取更多流量?(百度贴吧怎样发视频)

  • 从微信转到支付宝怎么转(从微信转到支付宝怎么转没有银行卡)

    从微信转到支付宝怎么转(从微信转到支付宝怎么转没有银行卡)

  • 电脑n卡是什么(电脑n卡是什么显卡)

    电脑n卡是什么(电脑n卡是什么显卡)

  • 苹果mac键盘打不出字(苹果mac键盘打不出数字怎么设置)

    苹果mac键盘打不出字(苹果mac键盘打不出数字怎么设置)

  • 段前间距不显示(为什么标题段前间距不显示)

    段前间距不显示(为什么标题段前间距不显示)

  • 测温门可以测手机吗 (测温门可以测手指吗)

    测温门可以测手机吗 (测温门可以测手指吗)

  • 苹果f2开头的序列号(苹果f2开头的序列号是什么机器)

    苹果f2开头的序列号(苹果f2开头的序列号是什么机器)

  • nova6有光学防抖吗(华为nove6有光学防抖吗)

    nova6有光学防抖吗(华为nove6有光学防抖吗)

  • 北斗与gps谁更精准(北斗和gps哪个精度高知乎)

    北斗与gps谁更精准(北斗和gps哪个精度高知乎)

  • 腾讯会议超时怎么办(腾讯会议超时怎样强制撤回)

    腾讯会议超时怎么办(腾讯会议超时怎样强制撤回)

  • 光猫发热会影响网速吗(光猫发热会自燃吗)

    光猫发热会影响网速吗(光猫发热会自燃吗)

  • k20pro尊享版是ufs3.0吗(k20pro 尊享版)

    k20pro尊享版是ufs3.0吗(k20pro 尊享版)

  • 手机qq怎么设置自动回复消息的内容(手机qq怎么设置离线状态)

    手机qq怎么设置自动回复消息的内容(手机qq怎么设置离线状态)

  • iphone7plus声音小解决方法(iphone7plus声音小很普遍吗)

    iphone7plus声音小解决方法(iphone7plus声音小很普遍吗)

  • 捡到手机恢复出厂设置了还能被定位吗(捡到手机恢复出厂设置了用赔偿吗)

    捡到手机恢复出厂设置了还能被定位吗(捡到手机恢复出厂设置了用赔偿吗)

  • 三星手机可以下载两个微信吗(三星手机可以下载登记注册身份验证吗?)

    三星手机可以下载两个微信吗(三星手机可以下载登记注册身份验证吗?)

  • ipad如何语音(ipad如何语音转文字)

    ipad如何语音(ipad如何语音转文字)

  • xsmax支持指纹吗(xsmax支持指纹解锁吗)

    xsmax支持指纹吗(xsmax支持指纹解锁吗)

  • vue视频怎么放大字体(vue视频放大时怎么进行操作)

    vue视频怎么放大字体(vue视频放大时怎么进行操作)

  • 微信我的行程在哪里(微信我的行程足迹)

    微信我的行程在哪里(微信我的行程足迹)

  • 怪兽充电宝哪里可以还(怪兽充电宝多少钱一小时)

    怪兽充电宝哪里可以还(怪兽充电宝多少钱一小时)

  • 箱线图怎么判断偏态(箱线图怎么判断分布)

    箱线图怎么判断偏态(箱线图怎么判断分布)

  • x27没有面部解锁吗(vivox27设置里没有面部解锁怎么设置)

    x27没有面部解锁吗(vivox27设置里没有面部解锁怎么设置)

  • blnal30是荣耀几(honorlndal30是什么手机)

    blnal30是荣耀几(honorlndal30是什么手机)

  • 移动6位初始密码是多少(移动6位初始密码重置)

    移动6位初始密码是多少(移动6位初始密码重置)

  • 共享停车位app怎么开发(共享停车位app哪个好)

    共享停车位app怎么开发(共享停车位app哪个好)

  • 10分钟学会python对接【OpenAI API篇】(10分钟学会万用表)

    10分钟学会python对接【OpenAI API篇】(10分钟学会万用表)

  • 计提坏账部分收入怎么算
  • 生产车间领用材料,用于产品生产
  • 出票后定期付款的汇票是什么意思
  • 红字发票抵扣联丢了怎么办
  • 税控盘服务费抵减有效期几年
  • 过桥费是多少
  • 应交税费销项税在借方还是贷方
  • 工会支出发票抬头是企业名称可以吗
  • 小规模纳税人购车是怎么抵税的
  • 报销单和付款单的区别
  • 生产成本明细科目是原材料的名称吗
  • 工程预付款的规定
  • 基本存款账户能向银行借款吗
  • 开了票后才收到工程款怎么做账?
  • 一般纳税人没有开票要交税吗
  • 什么样的企业用交税
  • 现代服务业要满足什么条件才转一般纳税人
  • 委外技术服务费应归集哪个研发项目
  • 企业年报资产状况信息可以不填吗
  • 杨志勇财政
  • 公司收到纸质承兑不开票行吗
  • 土地出让金抵减增值税账务处理
  • 出纳汇错款会计怎么做账
  • 上月销售的货物会计分录
  • 长期股权投资稀释
  • 报表总收入
  • 出口退税最新规定2021
  • 多交增值税如何做账
  • 员工垫付公司钱怎么入账
  • mac系统技巧
  • 高新技术的研发收入是多少才可以提高
  • 会计变更
  • 小型微利企业的优惠政策
  • 冲回坏账
  • 去实体店装win10专业版多少钱
  • linux yum update
  • 补交以前年度的城建税会计分录
  • php面向对象编程
  • 营改增后哪些费用可以抵扣
  • 计提本月应交税金会计分录
  • 老板垫付的员工怎么入账
  • 股息分配方式
  • 当人力资源短缺时,用什么方法增加人力资源?
  • php用户登录界面代码
  • Cookie 的 SameSite 属性
  • loss for
  • vue组件入门
  • 2023年美赛春季赛成绩查询
  • php 方括号
  • 缴纳医疗保险费会计分录
  • 公司车辆出售需要什么手续
  • 销售返利账务处理及注意事项
  • 私募基金成立备案流程
  • 出口企业免税要交什么税
  • 无形资产摊销计算方法
  • 主要业务活动是什么意思
  • 主营业务收入多计提怎么冲减
  • 待抵扣进项税额和待认证进项税额的区别
  • 防伪系统制作
  • 审车费用表
  • 增发股票会计科目
  • 月末未完工半成品的分录
  • 关于sql的几道小知识
  • mac系统自带的杀毒软件
  • centos的特点
  • window 启动
  • win10用着怎么样
  • svcinit.exe - svcinit是什么进程
  • 修改虚拟机中的用户名
  • 如何删除win7系统
  • win10调小键盘
  • js cocos
  • 海量文件复制和复制区别
  • python numpy矩阵
  • 网络自定义怎么打开
  • jquery遍历radio并选中
  • sequelize-cli
  • python 执行远程代码
  • jquery鼠标位置
  • 率土之滨怎么提高建设值上限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设