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

  • qq需不需要实名认证吗(qq是否要实名认证)

    qq需不需要实名认证吗(qq是否要实名认证)

  • vivox50电池多少毫安(vivox50电池多大容量)

    vivox50电池多少毫安(vivox50电池多大容量)

  • 手机没有分屏功能怎么办(手机没有分屏功能,怎样分屏?oppo)

    手机没有分屏功能怎么办(手机没有分屏功能,怎样分屏?oppo)

  • QQ怎么取消密保手机(qq怎么取消密保手机号码绑定)

    QQ怎么取消密保手机(qq怎么取消密保手机号码绑定)

  • i7 7700hq是什么水平(i7 7700h属于什么级别)

    i7 7700hq是什么水平(i7 7700h属于什么级别)

  • 网络代理设置是什么意思(网络代理设置是什么意思手机)

    网络代理设置是什么意思(网络代理设置是什么意思手机)

  • 华为手机系统是安卓吗(华为手机系统叫啥)

    华为手机系统是安卓吗(华为手机系统叫啥)

  • 抖音最长视频多少时间(抖音视频 最长)

    抖音最长视频多少时间(抖音视频 最长)

  • 华为p40pro新机有保护膜吗(华为p40pro新机有充电器吗)

    华为p40pro新机有保护膜吗(华为p40pro新机有充电器吗)

  • vivo手机4g变成2g怎么恢复(vivo手机4g变成2g怎么办)

    vivo手机4g变成2g怎么恢复(vivo手机4g变成2g怎么办)

  • g2020相当于i几(g2010相当于i几)

    g2020相当于i几(g2010相当于i几)

  • 小米口袋打印机连接不上(小米口袋打印机使用方法)

    小米口袋打印机连接不上(小米口袋打印机使用方法)

  • 苹果手机怎么取消静音设置(苹果手机怎么取消密码锁屏)

    苹果手机怎么取消静音设置(苹果手机怎么取消密码锁屏)

  • a卡和n卡是什么意思(a卡n卡什么区别)

    a卡和n卡是什么意思(a卡n卡什么区别)

  • iphone8和x区别(iphone 8 和iphone x有什么区别)

    iphone8和x区别(iphone 8 和iphone x有什么区别)

  • 为什么发信息尚未送达(为什么发的信息)

    为什么发信息尚未送达(为什么发的信息)

  • hlk一al00是什么型号(hlk一al00是什么型号价格)

    hlk一al00是什么型号(hlk一al00是什么型号价格)

  • 手机微信为什么老掉线(手机微信为什么发不了语音)

    手机微信为什么老掉线(手机微信为什么发不了语音)

  • 交换机的交换容量(交换机的交换容量是什么意思)

    交换机的交换容量(交换机的交换容量是什么意思)

  • 微信打什么字有特效(微信打什么字有兔子)

    微信打什么字有特效(微信打什么字有兔子)

  • 5ge是什么(5个是什么,什么是1)

    5ge是什么(5个是什么,什么是1)

  • etc屏幕平时亮着吗(etc屏幕不亮滴滴响)

    etc屏幕平时亮着吗(etc屏幕不亮滴滴响)

  • qq好友删了爱情的钥匙会没嘛(qq好友删除两天爱情树还会回来吗)

    qq好友删了爱情的钥匙会没嘛(qq好友删除两天爱情树还会回来吗)

  • 苹果x手机和苹果xr的区别(苹果x和苹果)

    苹果x手机和苹果xr的区别(苹果x和苹果)

  • Vue前端模板框架--vue-admin-template(vue前端模板网站)

    Vue前端模板框架--vue-admin-template(vue前端模板网站)

  • 工会经费计税依据
  • 递延所得税费用在资产负债表哪一项
  • 内账需要哪些单据
  • 通用机打发票内容可以随便写吗
  • 酒店物料消耗包括哪些
  • 12月费用1月报销的账务处理
  • 对公账户发工资1万要交税吗
  • 支付员工费用报销账务处理
  • 租借车辆发生事故后的保险理赔问题
  • 行政单位会计核算采用
  • 手工帐怎么登记
  • 发票抵扣联做进项税入账处理是怎样的?
  • 应交税费账户期末借方余额反映的是
  • 企业给员工的异地安家费交个税吗?
  • 国税局可以开增值税专用发票吗
  • 营业执照里承办什么业务
  • 营业执照许可经营信息怎么填
  • 个税没有扣除项,需要填写和确认吗
  • 办公费支出属于资产项目吗
  • 特殊性税务处理和一般性税务处理的区别
  • 使用专项资金购买的固定资产 需要取得发票吗
  • 服装具有什么性
  • 企业所得税法的规定可在税前扣除的
  • 附加税的税率是什么
  • 个人股权转让要交增值税吗
  • 财务费用的冲减什么意思
  • 信息技术服务费发票
  • 去年的成本如何调整
  • linux如何安装
  • 毛利率计算公式举例说明
  • 因质量问题被扣的货款销售方怎么做账
  • 赔偿款支出会计处理
  • 劳务的完成程度可以采用如下方法确定
  • .ini是什么类型文件?
  • 安装win7提示版本过低
  • 外商独资企业在中国上市简称什么
  • 无人驾驶控制方向
  • phpinfo页面
  • 特许权使用费啥意思
  • 房地产公司收到预售款缴纳印花税吗
  • win11的截屏
  • VUE-CLI/VUE-ROUTER
  • 图像边缘检测的基本原理
  • php array_udiff_assoc 计算两个数组的差集实例
  • 存放中央银行款项借方表示什么意思
  • 公司垫付的工伤医药费怎么报销
  • 织梦技巧
  • 附加税多计提了怎么调整
  • sql server功能介绍
  • 无形资产摊销会计凭证
  • 应纳税所得额是利润总额还是净利润
  • 收到发票并支付货款怎么做账
  • 航天税盘服务费开的普票可以抵税吗
  • 以前年度无形资产摊销
  • 废料处理没开票销项税
  • 个人所得税如何扣税
  • 无形资产的意思是
  • 撤回或减少投资所得税处理
  • 税法规定的增值税是指
  • 应付账款平账调到哪个科目
  • 扶贫入股分红政策
  • 转出未交增值税借方余额表示什么
  • 原材料科目怎么设置
  • 一个企业至少应纳多少税
  • mysql存储数据的原理
  • win7桌面整理软件
  • linux crontab用法
  • 微软推送win11
  • javascript动画教程
  • jquery添加css样式
  • 代码sd是什么意思
  • ogre 引擎
  • 快速备份mysql数据库
  • linux bash命令详解
  • 网上报税失败什么原因
  • 公司被税务查账对不上
  • 什么是解放思想?请阐述解放思想和实事求是之间的关系
  • 安徽工作人员出差费用标准
  • 会计建账时一般需要哪几本账
  • 个人有关事项核查情况的报告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设