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

  • alook怎么扫码(abook怎么扫描二维码)

    alook怎么扫码(abook怎么扫描二维码)

  • hd6850相当于什么显卡(hd6850相当于什么集显)

    hd6850相当于什么显卡(hd6850相当于什么集显)

  • 剪映片尾怎么自定义?(剪映剪片尾)

    剪映片尾怎么自定义?(剪映剪片尾)

  • 网卡的三个基本功能(网卡主要分为哪三种)

    网卡的三个基本功能(网卡主要分为哪三种)

  • 抖音小店只能对公账户吗(抖音小店只能在直播中呈现吗)

    抖音小店只能对公账户吗(抖音小店只能在直播中呈现吗)

  • qq拆礼物对方知道吗(qq送礼物对方拆开)

    qq拆礼物对方知道吗(qq送礼物对方拆开)

  • oled amoled 区别(oled与amoled哪个更好)

    oled amoled 区别(oled与amoled哪个更好)

  • 十进制127的二进制是多少(十进制127的二进制是 ,十六进制是)

    十进制127的二进制是多少(十进制127的二进制是 ,十六进制是)

  • 苹果11下面两个喇叭为什么只会响一个(苹果11下面两个喇叭没有声音)

    苹果11下面两个喇叭为什么只会响一个(苹果11下面两个喇叭没有声音)

  • 苹果7打电话没有免提(苹果7打电话没声音重启好了)

    苹果7打电话没有免提(苹果7打电话没声音重启好了)

  • 抖音上拍的照片怎么保存到相册(抖音上拍的照片删了怎么恢复)

    抖音上拍的照片怎么保存到相册(抖音上拍的照片删了怎么恢复)

  • 导航卫星的作用是什么(导航卫星的作用是答案)

    导航卫星的作用是什么(导航卫星的作用是答案)

  • 手机里照片太多了内存不足怎么办(手机里照片太多占内存怎么办)

    手机里照片太多了内存不足怎么办(手机里照片太多占内存怎么办)

  • 有个碎片整理在哪里找(碎片整理一直停留在第一遍0%已合并)

    有个碎片整理在哪里找(碎片整理一直停留在第一遍0%已合并)

  • 荣耀20和nova5pro对比(荣耀20和nova5pro尺寸)

    荣耀20和nova5pro对比(荣耀20和nova5pro尺寸)

  • nova6是双模5G吗 (nova6是双4g吗)

    nova6是双模5G吗 (nova6是双4g吗)

  • 荣耀手环5什么时候发布(荣耀手环5什么手机都可以用吗)

    荣耀手环5什么时候发布(荣耀手环5什么手机都可以用吗)

  • 荣耀v20支持nfc吗(华为荣耀v20带有nfc功能会不会不安全)

    荣耀v20支持nfc吗(华为荣耀v20带有nfc功能会不会不安全)

  • 拼多多主图视频怎么上传(拼多多主图视频尺寸大小)

    拼多多主图视频怎么上传(拼多多主图视频尺寸大小)

  • 陌陌注销后好友还在吗(陌陌注销后好友看到的样子)

    陌陌注销后好友还在吗(陌陌注销后好友看到的样子)

  • 苹果xrmax是双卡吗(iphone xr max双卡双待)

    苹果xrmax是双卡吗(iphone xr max双卡双待)

  • 苹果xr怎么降系统(苹果xr降系统)

    苹果xr怎么降系统(苹果xr降系统)

  • macbook a1534 是哪款(a1534 macbook 型号)

    macbook a1534 是哪款(a1534 macbook 型号)

  • qq音乐文件在哪里查找(qq音乐文件在哪个文件夹)

    qq音乐文件在哪里查找(qq音乐文件在哪个文件夹)

  • 富文本编辑器介绍(富文本编辑器使用)

    富文本编辑器介绍(富文本编辑器使用)

  • 微擎框架破解版v2.6.4去授权一键安装纯净商业版(微擎纯净框架,无任何限制)-电脑学习网(破解版微擎框架如何升级)

    微擎框架破解版v2.6.4去授权一键安装纯净商业版(微擎纯净框架,无任何限制)-电脑学习网(破解版微擎框架如何升级)

  • 装修行业小规模纳税人标准
  • 其他收益里的政府补助免税吗
  • 合伙企业需要报工商年报吗
  • 实际成本法和计划成本法的会计分录
  • 小规模纳税人核算方式选什么
  • 商业房产出租和租赁区别
  • 通讯费可以个人承担吗
  • 冲销成本结转需要什么凭证
  • 企业所得税季报资产总额怎么填
  • 未及时支付工资时间界限
  • 冲销应收账款会引起
  • 材料采购做账的流程
  • 虚减利润如何进行账务调整?
  • 租房的装修费怎么入账
  • 地产企业不动产登记入哪个科目?
  • 子公司给母公司开票
  • 注册资本使用后账务如何处理
  • 发票丢失后可以冲红吗
  • 企业已交地税税金如何做账务处理?
  • 损益表现金流量表资产负债表
  • 已申报未导入什么意思呀
  • 普通发票没有进账怎么办
  • linux aws是什么
  • xbox无法连接无线网络
  • win11桌面右键失效
  • shine.exe - shine是什么进程 有什么用
  • PHP:mcrypt_enc_get_modes_name()的用法_Mcrypt函数
  • 给企业法人缴纳社保流程
  • 补缴企业所得税和滞纳金如何入账
  • 公司清算债权债务如何清理
  • 企业所得税的税率是多少
  • 预收账款通俗易懂的说法
  • 康沃尔郡的大学
  • 小微企业报税后多久缴税
  • 移动加权平均法例题
  • 手撕发票怎样盖章子
  • ntpdate 命令
  • php function函数的用法
  • 贪吃蛇python小白
  • 印花税申报完成如何缴纳
  • 电子发票报税怎么操作
  • 原始投资额的现值
  • 公司基本户可以注销吗
  • 图片加载不存在
  • 贴现模式怎么计算利息
  • 费用发票先入账吗
  • 公司股东投资在哪里查
  • 社保代扣代缴的规定
  • sql server功能选择
  • PostgreSQL 查看数据库,索引,表,表空间大小的示例代码
  • 实收资本结转本年利润
  • 公积金发票掉了怎么办
  • 财政拨入的专项款专账怎么做
  • 小规模纳税人企业所得税2023
  • 经营租赁属于什么收入
  • 建筑行业会计怎么样,有前景吗
  • 无形资产入账价值包括费用化支出吗
  • 公司报销发票需要查验真假吗
  • 旅游饮食服务企业会计核算的特点包括
  • oracle基础知识
  • server core安装完成后按什么进行登录
  • itunes无法更新app
  • xp系统exiting pxe rom
  • spysweeper.exe - spysweeper是什么进程
  • win1020h2版好不好
  • xp系统win键没反应
  • 在mac中该如何共享文件夹
  • Win RT 8.1 Update 3怎么提前更新安装使用?
  • dx12最新版本
  • 误删了一些文件电脑不能正常启动了
  • exec方法
  • easyui datagrid resize
  • nodejs rbac
  • 高斯软件最新版本
  • python中print函数的end参数
  • 贵阳网上办税服务厅
  • 养老机构范畴
  • 2020年南通居民医保缴费标准
  • 税务上的关联企业指哪些
  • 个人有关事项核查情况的报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设