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

  • 简单生活,享受快乐(简单生活享受人生)

    简单生活,享受快乐(简单生活享受人生)

  • vscode代码格式化(vscode代码格式化快捷键设置)

    vscode代码格式化(vscode代码格式化快捷键设置)

  • vivo手机怎么关闭防沉迷功能(vivo手机怎么关闭快应用)

    vivo手机怎么关闭防沉迷功能(vivo手机怎么关闭快应用)

  • 怎么设置电脑默认存储到D盘(怎么设置电脑默认输入法)

    怎么设置电脑默认存储到D盘(怎么设置电脑默认输入法)

  • hosts文件位置(window hosts文件位置)

    hosts文件位置(window hosts文件位置)

  • 手机淘宝积分怎么兑换(手机淘宝积分怎么用)

    手机淘宝积分怎么兑换(手机淘宝积分怎么用)

  • Excel套用表格格式怎么设置(Excel套用表格格式怎么用不了)

    Excel套用表格格式怎么设置(Excel套用表格格式怎么用不了)

  • midi文件中记录的是什么(midi文件中记录的不是声音信号而是)

    midi文件中记录的是什么(midi文件中记录的不是声音信号而是)

  • 方舟编译器有什么作用(方舟编译器什么意思)

    方舟编译器有什么作用(方舟编译器什么意思)

  • 16寸苹果笔记本长宽(16寸苹果笔记本电脑的长宽是多少)

    16寸苹果笔记本长宽(16寸苹果笔记本电脑的长宽是多少)

  • 快剪辑免费吗(快剪辑是免费的还是收费的)

    快剪辑免费吗(快剪辑是免费的还是收费的)

  • 华为mate30超级快充怎么开启(华为mate30超级快充变成普通充电了)

    华为mate30超级快充怎么开启(华为mate30超级快充变成普通充电了)

  • 红米note5是什么显示屏(红米note5介绍)

    红米note5是什么显示屏(红米note5介绍)

  • 美团怎么删除账单记录(美团怎么删除账单详情)

    美团怎么删除账单记录(美团怎么删除账单详情)

  • oppoa73怎么快速截屏(怎样让oppoa37t变快)

    oppoa73怎么快速截屏(怎样让oppoa37t变快)

  • 大数据应用安全策略包括什么(大数据应用安全策略包括)

    大数据应用安全策略包括什么(大数据应用安全策略包括)

  • 手机桌面图标不见了怎么恢复(手机桌面图标不显示文字了怎么回事)

    手机桌面图标不见了怎么恢复(手机桌面图标不显示文字了怎么回事)

  • oppo强制恢复出厂设置(oppo强制恢复出厂coloros)

    oppo强制恢复出厂设置(oppo强制恢复出厂coloros)

  • 淘宝为什么发不了信息(淘宝为什么发不出去信息怎么办)

    淘宝为什么发不了信息(淘宝为什么发不出去信息怎么办)

  • 显示器vrb是什么意思(显示器vrb是什么功能?)

    显示器vrb是什么意思(显示器vrb是什么功能?)

  • excel日期显示#####怎么弄(excel日期显示不全)

    excel日期显示#####怎么弄(excel日期显示不全)

  • 苹果耳机盒子丢了怎么找回(苹果耳机盒子丢了怎么定位找回来)

    苹果耳机盒子丢了怎么找回(苹果耳机盒子丢了怎么定位找回来)

  • mac版ps快捷键(mac版ps快捷键设置怎么弄成win版)

    mac版ps快捷键(mac版ps快捷键设置怎么弄成win版)

  • 威客网是做什么的(威客网是做什么产品的)

    威客网是做什么的(威客网是做什么产品的)

  • 相机怎么传照片到手机(相机怎么传照片到手机vivo)

    相机怎么传照片到手机(相机怎么传照片到手机vivo)

  • 税前利润是什么利润
  • 合伙企业投入资金是否缴纳印花税
  • 5000以下固定资产怎么做账
  • 农产品普通发票抵扣政策
  • 没有车加油费可以入账吗
  • 国际多式联运必须具备的基本条件是什么
  • 个人所得税可以退几年前的?
  • 用友怎么设置工龄工资
  • 享受企业所得税三免三减半优惠的起始时间
  • 公司社保收费标准
  • 资金型股东溢价进入
  • 公司先注册实收资本后付账该如何做会计处理呢?
  • 个人开利息发票的税率与会计分录
  • 境外付汇代扣代缴
  • 企业对外借款是怎么规定的
  • 一张发票多个单位报销,怎么分辨
  • 银行卡收单机构外包业务管理指引
  • 劳务公司开票是开劳务费还是工程服务
  • 陈列费表格
  • 蔬菜销售收入免增值税吗
  • 通用定额发票能用吗
  • 诉讼费计入哪里
  • 玩游戏时切换窗口怎么弄
  • 交印花税会计分录怎么写
  • 电子承兑汇票怎么用
  • 小规模企业年末怎么结转
  • 以前年度的费用可以入在当年吗?
  • 电脑系统权限管理在哪里
  • 发票明细与实际送货清单不符
  • 公司账户存款
  • 转销盘盈会计分录
  • 小微企业直接融资和间接融资
  • vue获取当前路由地址
  • nginx配置伪静态规则
  • php文档系统
  • php函数作用
  • yolov5源码解读
  • 企业购进固定资产,在安装完工交付使用时
  • 子公司收购母公司另一子公司会计处理
  • 包装物为什么是无菌的
  • 教大家8天学通MongoDB——第一天 基础入门篇
  • 租房押金会计分录是什么
  • 职工教育经费包括住宿费吗
  • 专用发票超过360天未认证
  • 境外运费支付属什么费用
  • 小规模增值税税率2023
  • 减免城建税的会计分录
  • 事业单位未取得相关证书不予受理
  • 固定资产处理附件是什么
  • 住房公积金的账户状态是封存是什么意思
  • 如何发放银行贷款利息
  • 累计预扣法的优缺点
  • 实缴制下未到位资金
  • 招标付款条件及比例
  • 企业对处于不同位置的产品或服务制定不同的价格
  • 错账的更正方法有哪些
  • 纳税人虽设置账簿,但账目混乱
  • sql提取指定字符串
  • cf分屏不全屏
  • openeuler操作系统安装方法
  • WINDOWS7系统安装包
  • linux防御
  • cnqmax.exe进程的详细注解 cnqmax进程是病毒吗 安全吗
  • win8怎么设置
  • win10更新到win11
  • win7无法打开windows功能
  • win7电脑全屏
  • android自定义搜索框
  • unity如何操作
  • unity3d插件手机版
  • css应用领域
  • python os.access
  • jquery 滑块
  • 用js实现一个复杂对象深拷贝的算法
  • CameraViewControl 摄像机 绕 物体
  • 电脑兼容ie
  • jquery audio
  • 树形菜单html
  • 进口小麦关税税率是多少
  • 工厂的税率是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设