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

  • 或有资产的特点和或有资产的披露是什么
  • 增值税专用发票抵扣期限
  • 财务管理税后利息率计算公式
  • 股东投资的钱放在哪里
  • 农业技术服务个人总结
  • 母公司及子公司借款要利息吗
  • 无形资产净损失计入
  • 消费卡预付卡能入账吗
  • 资产负债表项目的编制方法
  • 疫苗接种防疫站
  • 划转税务的非税收入2023
  • 增值税认证逾期怎么处理
  • 公司无收入费用如何做账务处理核算?
  • 印花税销售分录
  • 在建工程需要交哪些税
  • 客运服务是指
  • 哪些情况下不就地分摊缴纳企业所得税?
  • 计提房产税的会计分录怎样做
  • 公司注销固定资产如何处理
  • 资产负债表里面的应收账款包括哪些
  • 继续教育专项附加扣除标准
  • 专项应付款会计科目代码
  • 代销返点如何进行会计处理?
  • 给员工小孩买礼物合适吗
  • 合并报表同一控制下和非同一控制下区别
  • 高新技术企业研发
  • 实际利率是r还是i
  • 如何删除文档中多余的页
  • laravel learnku
  • 记账凭证的摘要怎么填写
  • linux grep使用
  • 其他业务收入对方科目
  • 委托加工物资加工费计入
  • PHP:iterator_apply()的用法_spl函数
  • 废旧物资销售收入
  • 向客户收费
  • 固定资产卡片账自固定资产报废后的保管期限是
  • 塔河流域
  • php输出mysql查询结果
  • 固定资产改造更新
  • 代扣代缴应付职工薪酬账务处理
  • 企业接受捐赠资产属于什么科目
  • 个税申报报的是已离职的员工员工投诉
  • 金融资产发生减值的客观证据包括哪些
  • 会计要考哪些证书,难度如何
  • 工会收支账务处理
  • mysql的字符串
  • 计提工资的时候跟发放的时候不一样怎么办
  • 开票项目与实际不符合
  • 零申报失败什么原因
  • 临时贷款属于什么会计科目
  • 如何进行工程项目的经济评价
  • 数据库关键字有哪些
  • 小微企业免税额按1%还是3%确认收入
  • 赠送代金券账务怎么处理
  • 自产产品用于业务招待
  • 预收账款的账务处理
  • 认缴制下实收资本需要验资吗
  • 减免的税金怎样做会计分录
  • 其他权益工具投资公允价值变动计入什么科目
  • 非流动资产基金对应的新科目
  • 损益类科目如何结转本年利润
  • 收购免税农产品的进项税率
  • 保险可以税前扣除吗
  • 公司向职工借钱怎么做账
  • 个人如何成立公司
  • 如何关闭windows防火墙
  • xp系统如何查询配置
  • unable to boot - please use a kernel appropriate for your cpu的解决方法
  • wrme.exe是什么
  • win7无法识别usb设备怎么办 五大方法来解决
  • js原生实现ajax
  • unity3d入门视频教程
  • unity game optimization
  • nodejs mocha
  • python的argparse用法
  • unity3d物体旋转
  • python文件rb
  • 电信宽带绑定的手机号怎么解除绑定
  • 电子发票查询官方
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设