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

  • 房产税城镇土地使用税税率
  • 个税申报数是按应发数还是实发数进行申报?
  • 建筑劳务发票是全额抵扣吗
  • 以前年度损益调整属于哪类科目
  • 应付款为什么是负数
  • 预收款方式销售货物
  • 一般纳税人所得税优惠政策最新2022
  • 利润表本期金额怎么算
  • 个人出租不动产税率
  • 会计核算制度的案例
  • 哪些邮政业务可以寄快递
  • 税务记账保存多少年纳税人转小规模
  • 利息支出没有发票怎么做账
  • 去年暂估的成本,汇算前收到的少,红冲全部暂估吗
  • 给个人的返利如何交税
  • 减免所得税怎么算税率
  • 简易计税借方余额
  • 一般纳税人开普票税率是多少
  • 小规模纳税人和小微企业区别
  • 车船税交给谁了
  • 代数分配法适用于什么
  • 资金清算款项
  • 现金流量表的填制方法和构成
  • 收回购货方前欠货款属于什么
  • 员工宿舍可以扣除住房租金支出吗
  • windows所有应用
  • 国库年终总结
  • 调账的基本原则
  • 员工意外伤害保险怎么买
  • 经营营业执照以外
  • schupd.exe - schupd是什么进程 有什么用
  • 应税货物销售额是什么意思
  • 房地产开发公司组织架构
  • 福利企业的税收怎么算
  • 企业签订的技术合同
  • 所有者权益会计要素包括
  • 工程分包合同
  • 2021mathorcupc题答案
  • 汽车4s店一般会摆放什么小零食
  • 卫生医疗收费专业有哪些
  • 发票有别的字迹有影响吗
  • 企业申报纳税都交什么税
  • 公司间借款利息怎么开发票
  • 餐饮行业加盟模式
  • 检测费账务处理
  • 银行结息交易是扣钱的意思吗
  • 应收账款对应什么会计科目
  • 固定资产折旧递延收益
  • 预计负债 负债 区别
  • 企业生育津贴发放细则
  • 开发票的其他要求是?
  • 应交税费进项税额转出
  • 公众责任险作用
  • 旧账整理方案
  • 什么是备查账
  • 完美解决usb供电不足
  • mysql批量删表
  • Sqlserver中char,nchar,varchar与Nvarchar的区别分析
  • xp系统怎么弄成win7
  • mac快速开机
  • windows server2012安装完没有桌面
  • CentOS 5.4+OpenVZ+Vtonf打造VPS服务器的方法
  • CentOS 5.4 rsync+inotify配置触发式(实时)文件远程同步
  • 如何配置centos7下的apache服务
  • win7系统打开服务
  • win8都有哪些版本
  • linux必会的20种服务
  • node.js gui
  • python 操作微信
  • unity平面透明
  • javascript基础笔记
  • unity3d all compiler errors
  • 远程调用call
  • jstree异步加载
  • jquery easing
  • 专项调查法
  • 实名办税信息采集的身份证件
  • 境外服务收入如何纳税
  • 税务注销后发现报表报错的怎么办
  • 重庆职高学校推荐
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设