位置: IT常识 - 正文

VUE3的watch监听使用(vuewatch监听对象及对应值的变化)

编辑:rootadmin
VUE3的watch监听使用 VUE3的watch监听使用watch介绍watch监听的不同情况1 监听单个refimpl数据2 监听多个refimpl数据3 监听proxy数据4 监听proxy数据的某个属性5 监听proxy数据的某些属性总结watch介绍

推荐整理分享VUE3的watch监听使用(vuewatch监听对象及对应值的变化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue的watch监听props,vuewatch监听对象及对应值的变化,vue监听watch监听全局对象,vue watch监听localstorage变化,vue watch监听耗费性能,vue的watch监听props,vuewatch监听对象及对应值的变化,vue watch监听耗费性能,内容如对您有帮助,希望把文章链接给更多的朋友!

vue中watch用来监听数据的响应式变化.获取数据变化前后的值 watch的完整入参

watch(监听的数据,副作用函数,配置对象)watch(data, (newData, oldData) => {}, {immediate: true, deep: true})watch监听的不同情况

创建响应式数据

import { ref, watch, reactive } from "vue";let name = ref("moxun");let age = ref(18);let person = reactive({ Hobby: "photo", city: { jiangsu: { nanjing: "雨花台", }, },});1 监听单个refimpl数据watch(name, (newName, oldName) => { console.log("newName", newName);});2 监听多个refimpl数据

方式一:vue3允许多个watch监听器存在

watch(name, (newValue, oldValue) => { console.log("new", newValue, "old", oldValue);});watch(age, (newValue, oldValue) => { console.log("new", newValue, "old", oldValue);});VUE3的watch监听使用(vuewatch监听对象及对应值的变化)

方式二:将需要监听的数据添加到数组

watch([name, age], (newValue, oldValue) => { // 返回的数据是数组 console.log("new", newValue, "old", oldValue);});3 监听proxy数据

注意

1.此时vue3将强制开启deep深度监听 2.当监听值为proxy对象时,oldValue值将出现异常,此时与newValue相同

// 监听proxy对象watch(person, (newValue, oldValue) => { console.log("newValue", newValue, "oldValue", oldValue);});4 监听proxy数据的某个属性

需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化

watch( () => person.Hobby, (newValue, oldValue) => { console.log("newValue",newValue, "oldvalue", oldValue); });

注意 当监听proxy对象的属性为复杂数据类型时,需要开启deep深度监听

watch( () => person.city, (newvalue, oldvalue) => { console.log("person.city newvalue", newvalue, "oldvalue", oldvalue); },{ deep: true });5 监听proxy数据的某些属性watch([() => person.age, () => person.name], (newValue, oldValue) => { // 此时newValue为数组 console.log("person.age", newValue, oldValue);});总结

1.与vue2中的watch配置一致 2.两个坑:

监听reactive定义的proxy代理数据时 oldValue无法正确获取 强制开启deep深度监听(无法关闭)

监听reactive定义的proxy代理对象某个属性时deep配置项生效

本文链接地址:https://www.jiuchutong.com/zhishi/292401.html 转载请保留说明!

上一篇:鸟瞰博登湖上的迈瑙岛,德国 (© Amazing Aerial Agency/Offset by Shutterstock)(博登湖下载)

下一篇:皮丘拉湖畔的乌代布尔城市宫殿,印度 (© Chaiyun Damkaew/Getty Images)

  • 自媒体怎样看待粉丝经济,决定了其到底能走多远(看待自媒体的观念有误的是)

    自媒体怎样看待粉丝经济,决定了其到底能走多远(看待自媒体的观念有误的是)

  • iqoo8怎么设置锁屏密码(iqoo8怎么设置锁屏视频)

    iqoo8怎么设置锁屏密码(iqoo8怎么设置锁屏视频)

  • 华为账号怎么强制解除(华为账号怎么强制解除实名)

    华为账号怎么强制解除(华为账号怎么强制解除实名)

  • WPSoffice2019如何添加蓝色底纹(wps2021怎么样)

    WPSoffice2019如何添加蓝色底纹(wps2021怎么样)

  • 苹果xriOS13.5微信不能录音怎么设置(苹果xr微信8.0)

    苹果xriOS13.5微信不能录音怎么设置(苹果xr微信8.0)

  • m1901f7e红米啥型号(红米m1901f7c)

    m1901f7e红米啥型号(红米m1901f7c)

  • 装了sd卡为什么不能用(装了sd卡为什么不显示)

    装了sd卡为什么不能用(装了sd卡为什么不显示)

  • oppo最小的音量还是大(opporeno最小的音量还是大)

    oppo最小的音量还是大(opporeno最小的音量还是大)

  • 怎么看谁打开过我分享的淘宝链接(怎么看谁打开过我分享的天猫链接)

    怎么看谁打开过我分享的淘宝链接(怎么看谁打开过我分享的天猫链接)

  • 华为荣耀v30什么时候发布(华为荣耀v30什么时候出的)

    华为荣耀v30什么时候发布(华为荣耀v30什么时候出的)

  • 苹果蓝牙耳机坏了一个怎么办(苹果蓝牙耳机坏了一只怎么办)

    苹果蓝牙耳机坏了一个怎么办(苹果蓝牙耳机坏了一只怎么办)

  • windows系统都有几个版本(win系统有哪些)

    windows系统都有几个版本(win系统有哪些)

  • 奔腾e5300相当于i几(奔腾e5200相当于i几)

    奔腾e5300相当于i几(奔腾e5200相当于i几)

  • 华为nova3i支持nfc功能吗(华为nova3i支持电信高清通话吗)

    华为nova3i支持nfc功能吗(华为nova3i支持电信高清通话吗)

  • 乐视手机怎么显示流量(乐视手机怎么显示电量)

    乐视手机怎么显示流量(乐视手机怎么显示电量)

  • 声卡怎么用手机唱歌(声卡怎么用手机录音啊)

    声卡怎么用手机唱歌(声卡怎么用手机录音啊)

  • 苏宁1200是什么意思(苏宁1200的四个阶段)

    苏宁1200是什么意思(苏宁1200的四个阶段)

  • git是什么工具(git属于什么工具)

    git是什么工具(git属于什么工具)

  • 电脑主机怎么安装(电脑主机怎么安装固态硬盘)

    电脑主机怎么安装(电脑主机怎么安装固态硬盘)

  • 快手超级管理怎么踢人(快手超级管理怎么禁言)

    快手超级管理怎么踢人(快手超级管理怎么禁言)

  • 小米电视怎么投屏安卓(小米电视怎么投屏图片)

    小米电视怎么投屏安卓(小米电视怎么投屏图片)

  • 单反如何拍视频(单反相机如何拍视频)

    单反如何拍视频(单反相机如何拍视频)

  • 鸿蒙系统怎么开启NFC并复制复制门禁卡?(鸿蒙系统怎么开发)

    鸿蒙系统怎么开启NFC并复制复制门禁卡?(鸿蒙系统怎么开发)

  • 讯飞AIUI智能机器人5-----让器理解你(语音技术综合应用)(讯飞智能x2)

    讯飞AIUI智能机器人5-----让器理解你(语音技术综合应用)(讯飞智能x2)

  • 员工垫付的费用报销会计分录
  • 费用多报销了,但已经给了,怎么办
  • 独立核算自负盈亏和统负盈亏怎么选
  • 固定资产变动包括哪些内容
  • 车船税重复交了怎么退怎么在网上完税?
  • 购买理财产品现金流量处理怎么做?
  • 已审核已过账已经生成凭证还能修改吗?
  • 价格调节基金税率和计税依据
  • 生育津贴报销流程是怎么样的要去社保局问吗
  • 2017年个税税率表及个税计算公式
  • 销售退货成本如何计算
  • 建筑服务税率是5
  • 销售土地使用权的增值税税率
  • 公司注销后股东主张债权的法律规定
  • 广告行业监管政策
  • 过路费企业所得税汇算清缴计入什么科目?
  • 未抵扣完的进项税额可以跨年抵扣吗
  • 驾校如何用完工百分比法确认收入?
  • 销售回购会计分录
  • 开发票时的数据可以四舍五入吗
  • multiple editions是什么版本
  • 累计折旧 减少
  • 赞助费支出怎样记账
  • 纳税人解除劳动合同补偿
  • 电脑fs0是什么
  • 价税款均未支付
  • yii2框架从入门到精通
  • php获取字符串中的指定字符
  • 小微企业免税额的会计分录
  • 工会经费可以提出来使用吗
  • 参展费会计分录
  • 微信小店的入口在哪里
  • 单目深度估计算法
  • 数据库管理系统能对数据库中的数据进行查询
  • 小程序微信认证
  • 销售费用占销售额比例怎么算
  • wordpress安装包
  • 收到赔偿金怎么写收据?
  • 工会经费申报的依据
  • 农业用肥尽量不选择
  • 申报错误要罚款吗
  • 出口属于什么行业
  • sql cell函数
  • 施工企业期间费用 企业管理费会计分录
  • 非独立核算增值税汇总缴纳吗
  • 营改增后,建筑行业与供应商签合同才怎样签没风险?
  • 接受母公司捐赠现金分录
  • 员工的工资属于固定资产吗
  • 股权转让如何缴纳个税
  • 房屋租赁费可以抵扣吗
  • 印花税算错了地方怎么办
  • 其他应收款项
  • 公司银行开户的一些资料是公司办公室保存还是财务保存
  • 建立明细账的操作步骤
  • sql 修改表的字段名称
  • 通过zeno实现加速屏幕显示操作教程
  • 修改window
  • “incorrect super block” FreeBSD挂载CDROM时报错误的解决方法
  • mac系统怎么给文件夹设置密码
  • wingate.exe - wingate是什么进程
  • win7怎么调窗口大小
  • linux卸载apache2
  • 电脑为什么会黑屏
  • cocos2d-x 3.4 windows 环境配置
  • 学dos有用吗
  • jQuery+HTML5实现弹出创意搜索框层
  • web标准有那几个方面
  • jquery插件怎么用到自己的网站
  • nodejs获取当前时间
  • xcopy命令怎么用
  • jquery简写符号
  • android ashmem
  • android camera1
  • javascript编程基础
  • 面向对象的基础知识
  • javascript图表
  • 税基式减免,税率式减免,税额式减免三者之间的联系
  • 从事农业种植是什么职业
  • 完税证明可以自己在家打印吗
  • 调研基本情况介绍范文
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设