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

  • 3g上网卡怎么用(3g上网卡怎么用)(3g的无线上网卡)

    3g上网卡怎么用(3g上网卡怎么用)(3g的无线上网卡)

  • excel汇总分类怎么做(excel汇总分类怎么取消)

    excel汇总分类怎么做(excel汇总分类怎么取消)

  • 华为mate30pro可不可以投屏到墙上(mate30pro可以)

    华为mate30pro可不可以投屏到墙上(mate30pro可以)

  • 打开淘宝音乐就停了怎么办(打开淘宝音乐就停止播放)

    打开淘宝音乐就停了怎么办(打开淘宝音乐就停止播放)

  • pr比特率设置多少合适(pr比特率设置多少不会二次压缩)

    pr比特率设置多少合适(pr比特率设置多少不会二次压缩)

  • qq匿名聊天能查出是谁吗(qq匿名聊天能查出是谁吗群)

    qq匿名聊天能查出是谁吗(qq匿名聊天能查出是谁吗群)

  • pon灯闪烁是欠费了吗(pon灯一闪一闪连不上网什么原因)

    pon灯闪烁是欠费了吗(pon灯一闪一闪连不上网什么原因)

  • 学习通有网页版吗

    学习通有网页版吗

  • 为什么移动4g网络那么慢(为什么移动4g网络一下有一下没有)

    为什么移动4g网络那么慢(为什么移动4g网络一下有一下没有)

  • 支付宝只能集一个五福(支付宝只能集一套福卡吗)

    支付宝只能集一个五福(支付宝只能集一套福卡吗)

  • 备忘录突然变空白(备忘录为什么突然空了)

    备忘录突然变空白(备忘录为什么突然空了)

  • 微信手机和ipad消息为什么不能同步(苹果手机微信怎么安装)

    微信手机和ipad消息为什么不能同步(苹果手机微信怎么安装)

  • 小天才手表能用什么卡(小天才手表能用几年)

    小天才手表能用什么卡(小天才手表能用几年)

  • switch关机可以充电吗(switch关机可以充电开机不充电)

    switch关机可以充电吗(switch关机可以充电开机不充电)

  • 电脑屏幕一会亮一会暗怎么回事(电脑屏幕一会亮一会不亮怎么回事)

    电脑屏幕一会亮一会暗怎么回事(电脑屏幕一会亮一会不亮怎么回事)

  • 为什么电脑黑屏只看得到鼠标(为什么电脑黑屏了鼠标还能动)

    为什么电脑黑屏只看得到鼠标(为什么电脑黑屏了鼠标还能动)

  • 一加7T慢动作录像怎么开启(一加9r慢动作)

    一加7T慢动作录像怎么开启(一加9r慢动作)

  • 苹果x拍照声音怎么关(苹果手机怎么把拍照声音关掉)

    苹果x拍照声音怎么关(苹果手机怎么把拍照声音关掉)

  • 淘宝钉钉是干什么的(淘宝钉钉在哪里)

    淘宝钉钉是干什么的(淘宝钉钉在哪里)

  • 手机微信语音怎么录音(手机微信语音怎么恢复)

    手机微信语音怎么录音(手机微信语音怎么恢复)

  • cpu使用100%是什么意思(cpu使用率100有害处吗)

    cpu使用100%是什么意思(cpu使用率100有害处吗)

  • 1660ti mq什么意思

    1660ti mq什么意思

  • 怎样才能用手机连接到路由器(怎样才能用手机找到附近的手机)

    怎样才能用手机连接到路由器(怎样才能用手机找到附近的手机)

  • 5g下载速度有多快(5g下载速度有多快每秒)

    5g下载速度有多快(5g下载速度有多快每秒)

  • 小米6x耳机插上还是外放(小米6x插口耳机失灵)

    小米6x耳机插上还是外放(小米6x插口耳机失灵)

  • 怎么知道手机号码(怎么知道手机号被对方拉黑了)

    怎么知道手机号码(怎么知道手机号被对方拉黑了)

  • win10添加第二块硬盘(win10添加第二块硬盘怎么分区)

    win10添加第二块硬盘(win10添加第二块硬盘怎么分区)

  • 劳务派遣公司企业所得税税率
  • 所得税税前扣除项目及扣除标准
  • 住宿业的小规模纳税标准
  • 差额征税的税率怎么计算
  • 应交城建税计入哪个科目
  • 多余的进项税该怎么处理
  • 减免所得税额怎么做分录
  • 发票盖了财务专用章旁边再盖发票章
  • 应征增值税不含税销售额(3%征收率)怎么填2020年
  • 期初数调整的分录怎么做
  • 2019年定额手撕发票2023年还能用吗
  • 增值税进项加计扣除计入哪个科目
  • 单位搬迁员工怎么办
  • 债转股资金
  • 期间费用分析方法有哪些
  • 超标公积金应怎么办理
  • 付款金额比发票金额少怎么办
  • 业务招待费取得的专票可以抵扣吗
  • 员工迟到扣款该怎么处理
  • 转让财产收入计入哪个科目
  • 工资哪些扣款应该扣税
  • 一般纳税人两费减免会计分录
  • 涉税服务机构如何纳入监管平台
  • 定额发票上的金额是什么
  • 个人所得税深圳税务
  • 金税盘不能清卡是啥原因
  • 销售设备并安装
  • 企业发生的运输费用怎么做账?
  • 成立公司工会
  • 股权转让收到钱会计分录
  • 增值税发票开具错误重开该怎么做会计分录?
  • 企业出口退税款属于征收企业所得税么
  • 原材料报废怎么记账
  • 制造业购买纸箱子记入什么科目
  • 酷狗云盘是干什么用的
  • 如何解决电脑无法定位程序输入点
  • 怎么通过mac地址访问设备
  • 苹果14
  • 高新技术企业的研发费用加计扣除
  • php curd
  • 为什么把收入进行舞弊假定
  • 增值税专用发票有几联?
  • 企业的做账流程有哪些
  • 老年人经常便秘怎么办
  • 污水处理增值税税率
  • win11任务管理器卡死没响应
  • cookie与session的作用和原理
  • python制作chm
  • ps怎么把多余的p掉
  • python PyQt5如何实现窗口功能
  • 未计提完固定资产怎么办
  • 红字发票冲销的申请表是税务局开吗
  • 单位收到已交个人社保
  • 主营业务收入多计提怎么冲减
  • 实缴税额怎么算
  • 公司一年发两次奖金
  • 车费多付了,怎么追回
  • 工资汇算清缴前发
  • 运费险三件衣服分3个快递寄出
  • 总账科目和明细账科目有哪些
  • 被代持股份的股东需要负责吗
  • 社保基数在哪里申报
  • 仓库费用计入什么科目
  • 财务费用怎么计入现金流量表
  • windows2008r2修改密码
  • linux 对比文件
  • winxp怎么做系统
  • mac系统锁屏
  • xp系统的本地连接在哪里打开
  • windows7的显示设置在哪里
  • 在linux操作系统中把外部设备当作文件统一管理
  • es6新增的数据结构
  • html收藏夹导入
  • unity自动生成
  • unity 版本控制
  • 职称申报结束多久公示
  • 银行关联方认定标准是什么
  • 技术进出口指什么技术
  • 大同地税局地址
  • 电脑有网为什么不能用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设