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

  • 专票税号不对可以认证吗
  • 税务师考试科目安排
  • 排污费用计入什么会计科
  • 无形资产研发成功
  • 用友无法录入现金流量怎么处理
  • 展位费怎么入账
  • 托管开票
  • 开发票税前税后
  • 一般纳税人兼营不同税率
  • 长期待摊费用进项税可以一次性抵扣吗?
  • 创投资本投入资金如何做账?
  • 收到一笔误缴的税款
  • 已经认证的进项税转出
  • 银行汇兑计入哪个会计科目?
  • 软件开发公司怎么找客户
  • 销售人员发生的业务招待费
  • 航天开票系统清单流程
  • 车辆保险属于金融服务吗
  • 一般纳税人能开普票吗,几个点
  • 工程税票怎么开需要交多少
  • 工程施工什么时候确认收入
  • 发票的校验码被公章覆盖了怎么办
  • 固定资产审计目标
  • 专票开票信息不填省份可以吗
  • 临时设施需要验收吗
  • 无租使用房产协议
  • 增值税专用发票的税率是多少啊
  • 建筑行业项目部会计要做什么
  • 跨年度的收入如何做分录
  • 上网的操作
  • php7 数组
  • 如何更改自己
  • window10电源选项
  • win10电源图标灰色无法打开
  • PHP:pg_last_error()的用法_PostgreSQL函数
  • wamp使用
  • 销售佣金在所得税里扣吗
  • Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
  • 研发新产品的重要性
  • 出让土地使用权和转让土地使用权的区别
  • 一维卷积padding
  • 微信小程序开发零基础入门
  • 唱吧地图
  • 微信小程序获取手机号失败
  • php强制下载文件在哪
  • 企业应付账款明细表
  • MySQL 数据库中,用于事务授权控制的关键词是下面哪个?
  • 固定资产科目的期末余额,反映固定资产的原价
  • sql中order by 1
  • 陈列费计入什么科目
  • 前几个月的印花税怎么算
  • 公司账户转账转错了能退回来吗
  • 应付账款周转率越大越好还是越小越好?
  • 包装物是指什么
  • 土地收储款是谁给谁
  • 出口未报关收到外汇怎样处理
  • 酒店营业额成本比例
  • 客户火车票可以抵扣进项税吗
  • 公司向个人借款是否合法
  • 查看mysql执行sql日志内容
  • mysql注入语句
  • linux系统中的输入输出分为三类
  • unix系统的文件分为哪三种存取结构
  • 如何重装edge
  • linux参数命令
  • linux 根目录
  • sxgdsenu.exe - sxgdsenu是什么进程 有什么用
  • win7系统加内存条怎么设置
  • win8注册表损坏进不了系统
  • suse linux 12 sp5
  • 64位Win7环境下vs2013配置opengl
  • unity游戏开发的技术
  • android 加载大量图片
  • jquery绑定click的方法有几种
  • 长途客运手撕票能不能报销
  • 怎样查看招聘信息
  • 契税为什么要补贴
  • 国税官网登录
  • 成都市成华区税务局新地址
  • 2020十大经济年度人物揭晓
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设