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

  • 微信电脑版3.3.0在哪申请内测(微信电脑版下载安装)

    微信电脑版3.3.0在哪申请内测(微信电脑版下载安装)

  • iphone如何清理存储空间(如何清理苹果手机存储)

    iphone如何清理存储空间(如何清理苹果手机存储)

  • 支付宝如何设置密码(支付宝如何设置自动转入余额宝取消)

    支付宝如何设置密码(支付宝如何设置自动转入余额宝取消)

  • 海尔洗衣机出现e6怎么处理(海尔洗衣机出现e2是什么情况)

    海尔洗衣机出现e6怎么处理(海尔洗衣机出现e2是什么情况)

  • 哔哩哔哩怎么换绑手机号(哔哩哔哩怎么换实名认证)

    哔哩哔哩怎么换绑手机号(哔哩哔哩怎么换实名认证)

  • 华为荣耀20是屏幕指纹解锁吗(华为荣耀20屏幕更换教程)

    华为荣耀20是屏幕指纹解锁吗(华为荣耀20屏幕更换教程)

  • 转移到ios无法迁移原因(转移到ios无法迁移照片)

    转移到ios无法迁移原因(转移到ios无法迁移照片)

  • oppo手机怎么一键换机(oppo手机怎么一下删除通话记录)

    oppo手机怎么一键换机(oppo手机怎么一下删除通话记录)

  • qq单删好友对方还有吗(qq单删好友对方列表还有吗)

    qq单删好友对方还有吗(qq单删好友对方列表还有吗)

  • 抖音老是自动转发(抖音老是自动转发视频)

    抖音老是自动转发(抖音老是自动转发视频)

  • 电脑上不显示苹果相册(电脑上不显示苹果热点)

    电脑上不显示苹果相册(电脑上不显示苹果热点)

  • 为什么苹果手机屏幕上突然出现了一个圆点(为什么苹果手机的手电筒打不开了)

    为什么苹果手机屏幕上突然出现了一个圆点(为什么苹果手机的手电筒打不开了)

  • 抖音别人下载不了我的视频怎么回事(抖音别人下载不了自己的作品是怎么回事)

    抖音别人下载不了我的视频怎么回事(抖音别人下载不了自己的作品是怎么回事)

  • 微软powerbi免费吗(powerbi.microsoft.com)

    微软powerbi免费吗(powerbi.microsoft.com)

  • 华为荣耀和p系列区别(华为荣耀和p系列mate系列哪个好)

    华为荣耀和p系列区别(华为荣耀和p系列mate系列哪个好)

  • return返回的值给谁(return返回值作用)

    return返回的值给谁(return返回值作用)

  • 怎么把qq提示音改成系统提示音(怎么把qq提示音改成手机提示音)

    怎么把qq提示音改成系统提示音(怎么把qq提示音改成手机提示音)

  • 快手蓝V和红V的区别(快手蓝v和红v的关系)

    快手蓝V和红V的区别(快手蓝v和红v的关系)

  • 切换不同窗口快捷键(怎样快速切换不同的窗口)

    切换不同窗口快捷键(怎样快速切换不同的窗口)

  • word怎么加下标(不加文字下划线word怎么打出来)

    word怎么加下标(不加文字下划线word怎么打出来)

  • 苹果怎么强制关机重启(苹果怎么强制关机屏幕失灵)

    苹果怎么强制关机重启(苹果怎么强制关机屏幕失灵)

  • win10系统怎么分盘(win10系统如何分区)

    win10系统怎么分盘(win10系统如何分区)

  • word下划线怎么弄长(word下划线怎么加粗)

    word下划线怎么弄长(word下划线怎么加粗)

  • 苹果11找不到电池百分比(苹果11找不到电池百分比怎么办)

    苹果11找不到电池百分比(苹果11找不到电池百分比怎么办)

  • 华为云盘在哪打开(华为云盘在手机的什么地方)

    华为云盘在哪打开(华为云盘在手机的什么地方)

  • word怎么加参考文献(word形式怎么弄)

    word怎么加参考文献(word形式怎么弄)

  • 华为荣耀20pro怎么截图(华为荣耀20Pro怎么隐藏应用)

    华为荣耀20pro怎么截图(华为荣耀20Pro怎么隐藏应用)

  • 小米无人机怎么不卖了(小米无人机怎么起飞)

    小米无人机怎么不卖了(小米无人机怎么起飞)

  • 华为手机的录屏功能在哪里能找到?(华为手机的录屏功能)

    华为手机的录屏功能在哪里能找到?(华为手机的录屏功能)

  • 手机麦克风设置在哪里(如何关闭手机麦克风设置)

    手机麦克风设置在哪里(如何关闭手机麦克风设置)

  • macOS 11 Big Sur 开发者预览版Beta 9正式推送

    macOS 11 Big Sur 开发者预览版Beta 9正式推送

  • Linux硬盘满了造成的一个bug(ERR_CONNECTION_RESET )(linux 硬盘满了)

    Linux硬盘满了造成的一个bug(ERR_CONNECTION_RESET )(linux 硬盘满了)

  • 协同过滤算法(基于用户的协同过滤算法)

    协同过滤算法(基于用户的协同过滤算法)

  • 文化事业建设税怎么申报
  • 装修收入应如何确定
  • 增值税相关政策
  • 主管税务机关是否参与清算
  • 没有购销合同的销售额交印花税吗
  • 文化创意服务的税率
  • 做账一定要银行对账单吗
  • 个人出租商业用房
  • 未确认融资费用计算公式
  • 季度不超过9万
  • 一般纳税人需要申报什么税
  • 小规模公司核定增收税可以公账直接打给法人吗?
  • 电梯折旧费如何分摊
  • 建设工程的停工损失包括哪些内容
  • 支付以前年度的费用会计处理
  • 过节发什么物资给员工好些
  • 复利现值系数和普通年金现值系数关系
  • 进项票失控对销项票有影响吗?
  • 业务人员出差住宿费记什么科目
  • 个人捐款单位需要记账吗
  • 餐饮发票一千多钱税
  • 野生药才收购网
  • 小规模纳税人贷款利息收入增值税税率
  • 金税三期定期定额是什么
  • 库存股是实收资本吗
  • linux系统配置ip地址命令
  • 三种测试网速的方法
  • 怎么获得最新医学类指南
  • linux小技巧
  • php string函数
  • 投资性房地产期末公允价值大于账面价值
  • 计提本月银行借款利息是收付实现制还是权责发生制
  • 以旧换新的税务处理会计
  • 结转代销成本
  • ros urdf
  • 小规模场地租赁费税率是1还是5
  • web2的核心理念
  • 怎样计提购销合同印花税
  • 企业办理工程价款流程
  • 外贸企业出口退税申报流程
  • 发票项目要求
  • 软件开发公司如何保护源码
  • 我们买得起一辆新车吗?英文
  • 不同单位发的劳务费会收税吗
  • 营业外收入如何纳税
  • 应付账款预付账款应收账款预收账款
  • 一般纳税人月销售额10万以下城建税
  • 工商年报资产状况公示还是不公示
  • 转售水电费收入确认
  • 发票的几种分类
  • 工业企业如何建立税务风险预警体系工作表
  • 打印机取消打印在哪里
  • ubuntu安装超详细教程
  • pe工具箱怎么用
  • vc运行程序
  • u盘装win8系统教程图解
  • centos5.4
  • WinCinemaMgr.exe - WinCinemaMgr是什么进程
  • scureapp.exe - scureapp是什么进程 有什么用
  • 微软刷机怎么刷
  • win10系统怎样卸载程序
  • windows8快捷键
  • WIN7系统中WQRD超链接打不开怎么办
  • easyui datagrid resize
  • vim按键
  • JAVA的OPENGL,JOGL入门实例----不断变色的点阵 (源代码)
  • nodejs cgi
  • linux中使用bash是什么意思
  • 噩梦像连续剧
  • 基于javascript的毕业设计选题
  • jQuery prototype冲突的2种解决方法(附demo示例下载)
  • python黑魔法手册
  • python的opencv
  • js的文件操作
  • python爬取电视剧
  • win7怎么装python3.8
  • 企业科研经费管理制度
  • 21年小规模企业所得税税率
  • 个人所得税完税证明
  • 青岛电子税务局电话人工客服电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设