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

  • 航天信息开票软件
  • 个人车辆无偿给公司使用
  • 劳务报酬和工资薪金哪个税率高
  • 税盘没有及时清卡
  • 企业所得税成本调减怎么填
  • 房地产涉及的税种和税率
  • 发票报送失败怎么弄
  • 转移性支出主要影响社会的什么领域
  • 行政单位在建工程会计分录
  • 退休工资怎样扣社保
  • 企业的定期存款
  • 收到总公司投资款怎么做账务处理
  • 现金出资可以吗
  • 跨年的增值税普通发票可以入账吗
  • 经营活动现金流量净额
  • 公司清算补偿工资标准
  • 合作经营收入分成发票税务名称怎么填
  • 部队医院学校都没有税号吗
  • 超过三年的坏帐损失税前扣除怎样规定?
  • 受让股东对出让股东抽逃出资
  • 1697510768
  • 劳务报酬已经缴税怎么办
  • 合伙企业利润分配个人所得税
  • 营业利润,利润总额的计算公式是
  • 电脑显示语言栏在哪里
  • 多台电脑共享打印机怎么设置
  • wrme.exe是什么
  • phpcrawl
  • 财政返还土地奖金的规定
  • 电力行业增值税率
  • 事业单位财政专项资金可以用于职工社保
  • 一般纳税人企业所得税如何计算
  • 增值税纳税申报表在哪里查询
  • wordpress安装包
  • 生育津贴的钱怎么取出来
  • python设置断点
  • phpcms怎么用
  • 取得农产品免税发票如何账务处理
  • 季度所得税申报怎么弥补以前年度亏损
  • 判断文件是否存在,存在则删除
  • 允许从销项税额中扣除的有
  • 如果删除申报记录会怎么样
  • 固定资产清理往报表哪列示
  • 预收一年房租的会计科目
  • 闽侯县安置房交易缴纳土地出让金
  • 土地出让金如何核算
  • 顾客办理会员卡要怎么做账?
  • 周转材料期末余额怎么算
  • 民办非企业的申请流程
  • 进出口总额用什么字母表示
  • 闲置固定资产如何折旧
  • 设备5年直线法计提折旧怎么做?
  • 什么是盈亏平衡法
  • 施工企业应收账款确认依据
  • sql server数据库中的null(空值)
  • mysql5.7.21安装教程
  • Linux(Ubuntu)下mysql5.7.17安装配置方法图文教程
  • winxp每次开机都要输入用户名
  • 苹果电脑邮箱添加163邮箱
  • txt无法打开怎么弄
  • 开机越来越慢会不会是硬件的问题
  • windows运行在哪
  • sealmon.exe - sealmon是什么进程 有什么用
  • windows8快捷键
  • Windows 8 Modern Apps 网络隔离如何解除?
  • win10怎么分屏操作
  • nodejs require 路径查找
  • float浮动布局原理
  • javascript基于什么的语言
  • 批处理forfiles
  • javascript教学视频
  • java与android的区别
  • 税务通知书一般什么内容
  • 如何抵扣
  • 增值税一般纳税人资格登记表
  • 购买增值税发票税务局打电话来问怎么处理?
  • 深圳个体户不注销的后果
  • 2022款进口途锐
  • 土地增值税优惠政策办理流程和手续方面的精简措施
  • 股权转让税务备案时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设