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

  • 十六个淘宝店铺免费推广方法(淘宝开10家店铺)

    十六个淘宝店铺免费推广方法(淘宝开10家店铺)

  • 抖音怎么投诉商家(抖音怎么投诉商家不按约定时间发货)

    抖音怎么投诉商家(抖音怎么投诉商家不按约定时间发货)

  • 小米11的电池是多少毫安(小米11的电池是什么牌子的)

    小米11的电池是多少毫安(小米11的电池是什么牌子的)

  • 进入省电模式无法开机(进入省电模式无法过入cmos)

    进入省电模式无法开机(进入省电模式无法过入cmos)

  • 用力按压手机屏幕会伤内屏吗(用力按压手机屏幕)

    用力按压手机屏幕会伤内屏吗(用力按压手机屏幕)

  • 华为mate30摄像头怎么用(华为mate30摄像头参数)

    华为mate30摄像头怎么用(华为mate30摄像头参数)

  • word蓝色双横线什么意思(word蓝色双横线怎么永久去掉)

    word蓝色双横线什么意思(word蓝色双横线怎么永久去掉)

  • 为什么前摄像头和后摄像头照出来的不一样(为什么前摄像头用不了怎么回事)

    为什么前摄像头和后摄像头照出来的不一样(为什么前摄像头用不了怎么回事)

  • 苹果视频美颜在哪里调(苹果 视频 美颜)

    苹果视频美颜在哪里调(苹果 视频 美颜)

  • 手机上照片怎么重命名(手机上照片怎么上传到报名表上)

    手机上照片怎么重命名(手机上照片怎么上传到报名表上)

  • gopro8和7的区别(gopro7和8的区别价格)

    gopro8和7的区别(gopro7和8的区别价格)

  • 华为matex折叠屏用的谁的屏幕

    华为matex折叠屏用的谁的屏幕

  • e980什么处理器(ex980是什么处理器)

    e980什么处理器(ex980是什么处理器)

  • 快手点亮红心要钱吗(快手点亮红心收费吗)

    快手点亮红心要钱吗(快手点亮红心收费吗)

  • 华为手机怎么弄两个微信出来(华为手机怎么弄门禁卡开门锁)

    华为手机怎么弄两个微信出来(华为手机怎么弄门禁卡开门锁)

  • 苹果7手机的nfc功能在哪里设置(苹果7手机的录音功能在哪里)

    苹果7手机的nfc功能在哪里设置(苹果7手机的录音功能在哪里)

  • 微信添加过期了怎么再次同意(微信添加过期了还会有提醒吗)

    微信添加过期了怎么再次同意(微信添加过期了还会有提醒吗)

  • 软件开发过程包括哪些阶段(软件开发过程包括哪些阶段?)

    软件开发过程包括哪些阶段(软件开发过程包括哪些阶段?)

  • 手机上的安全模式怎么取消(手机上的安全模式怎么关闭)

    手机上的安全模式怎么取消(手机上的安全模式怎么关闭)

  • vivoy51通讯录黑名单在哪(vivo手机通讯录里面的黑名单在哪里)

    vivoy51通讯录黑名单在哪(vivo手机通讯录里面的黑名单在哪里)

  • 抖音极速版为什么显示很遗憾(抖音极速版为什么没有签到功能)

    抖音极速版为什么显示很遗憾(抖音极速版为什么没有签到功能)

  • 华为手机高级设置在哪里(华为手机高级设置密码忘了)

    华为手机高级设置在哪里(华为手机高级设置密码忘了)

  • 腾讯视频的视频怎么下载到本地(如何下载腾讯视频的视频)

    腾讯视频的视频怎么下载到本地(如何下载腾讯视频的视频)

  • 2021最新win10激活密钥+神key推荐 附win数字永久激活工具+教程(最新版win10激活)

    2021最新win10激活密钥+神key推荐 附win数字永久激活工具+教程(最新版win10激活)

  • Linux怎么配置双机SSH互相信任实现免密码登录?(linux双ip路由设置方法)

    Linux怎么配置双机SSH互相信任实现免密码登录?(linux双ip路由设置方法)

  • nerf训练自己的数据,过程记录十分详细(nerf 怎么瞄准)

    nerf训练自己的数据,过程记录十分详细(nerf 怎么瞄准)

  • 装卸费发票怎么备注
  • 个体户和公司的经营范围有区别吗
  • 广告公司开票能开劳务费吗
  • 一般纳税人废业怎么办
  • 旧公司库存如何管理
  • 公司注销前的发言怎么写
  • 质押费用计入什么科目
  • 支付给客户的货款叫什么
  • 将承兑汇票背书怎么操作
  • 一般纳税人增值税可以抵扣吗
  • 企业购买银行理财
  • 扣服装费的收入如何交增值税?
  • 餐饮增值税
  • 广告制作费属于现代服务吗
  • 酒店行业税负率怎么算
  • 企业接受大额捐赠,可以分次确认收入缴纳企业所得税吗?
  • 个人汽车租给公司租金需多少钱?
  • 外资租赁房屋房产税和土地使用税怎么申报?
  • 固定资产出售后净残值怎么处理
  • 旅行社开的发票是否都要差额征税
  • 消费税怎样做分录
  • 税务局开的专票可以抵扣吗
  • 出口货物国际运输流程图
  • 土地合并需要什么资料
  • Win10专业版网络连接不上
  • 招标场地费计入什么科目
  • 购销合同违约罚款属什么科目
  • 既征增值税又征消费税的是
  • 冲减应收账款的分录
  • 固定资产汽车抵扣新政策
  • 厂区绿化工程计入什么科目
  • 国税局发票打印软件下载
  • yolo v5超详细解析
  • php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
  • php取mysql查询单条数据
  • css鼠标移入移出切换事件
  • 节流和防抖js
  • 出售持有股票会计处理
  • js中定义变量关键词是
  • mysql log
  • 收到现金股利是什么意思
  • 填写企业所得税年度纳税申报表都需要哪些数据
  • 在建工程借款利息计入哪里
  • 员工的交通费发票可以报销嘛
  • 股权变更的股东个税缴纳
  • 转租单位房子合法吗
  • 暂估入库后发票整单折扣
  • 保修的产品还收费吗
  • 进项税认证怎么按税率统计明细
  • 实收资本不到账怎么处理
  • 独立核算 单独核算
  • 资产负债表中的应交税费包括什么
  • 什么情况下可以待岗
  • 餐饮业做账会计分录大全,实用!
  • 补提以前年度个税会计分录
  • 航天开票系统怎么导出已开票明细
  • 摊余成本通俗
  • mysql 数据修改
  • win102009发布日期
  • win1010卸载
  • fedora os
  • 华硕笔记本电脑官网
  • ubuntu的终端在哪
  • win7电脑无法正常启动系统
  • linux系统概述
  • opengl中文教程
  • 手游频繁崩溃怎么解决
  • js单线程多线程
  • 发送邮件python
  • android内存使用情况
  • rpg好玩地图
  • android 子线程间通信
  • jupyter 安装python包
  • 在jquery中fadein
  • 四川税局官网发票
  • 浙江银行上班时间查询
  • 服务合同需要交个人所得税嘛
  • 成都市青羊区国有资产监督管理办公室
  • 文化传媒公司能卖多少钱
  • 亳州自来水缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设