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

  • iphonese2支持快充吗(苹果se2支持的快充)

    iphonese2支持快充吗(苹果se2支持的快充)

  • 安卓是美国的系统吗(安卓是美国开发的吗)

    安卓是美国的系统吗(安卓是美国开发的吗)

  • 微信群能设置头像吗(微信群能否设置头像)

    微信群能设置头像吗(微信群能否设置头像)

  • 苹果手机还原所有设置会怎样(苹果手机还原所有设置会怎么样)

    苹果手机还原所有设置会怎样(苹果手机还原所有设置会怎么样)

  • 云视听小电视能看直播吗(云视听小电视能看央视和卫视节目吗)

    云视听小电视能看直播吗(云视听小电视能看央视和卫视节目吗)

  • 微信怎么能把表情横排放(微信怎么能把表情包删除)

    微信怎么能把表情横排放(微信怎么能把表情包删除)

  • vivi手机截屏怎么截屏(vivo手机截图)

    vivi手机截屏怎么截屏(vivo手机截图)

  • 酷狗连续包月可以第一个月就取消吗(酷狗连续包月可以买了之后马上关吗)

    酷狗连续包月可以第一个月就取消吗(酷狗连续包月可以买了之后马上关吗)

  • 苹果镜面翻转在哪(苹果镜面反转怎么调)

    苹果镜面翻转在哪(苹果镜面反转怎么调)

  • miui跨版本升级可以通过什么方式(MIUI跨版本升级微信双开还在吗?)

    miui跨版本升级可以通过什么方式(MIUI跨版本升级微信双开还在吗?)

  • 第三方网站是什么意思(第三方网站有哪些)

    第三方网站是什么意思(第三方网站有哪些)

  • 侧面指纹的手机有哪些(侧面指纹的手机有哪几款)

    侧面指纹的手机有哪些(侧面指纹的手机有哪几款)

  • 美团注销了还能注册吗(美团注销了还能恢复吗)

    美团注销了还能注册吗(美团注销了还能恢复吗)

  • 快手怎么横屏观看(快手怎么横屏观看别人的作品)

    快手怎么横屏观看(快手怎么横屏观看别人的作品)

  • 手机关机键没有反应怎么办(手机关机键没有声音)

    手机关机键没有反应怎么办(手机关机键没有声音)

  • 华为mate30pro充满电自动断电吗(mate30pro充电多久满)

    华为mate30pro充满电自动断电吗(mate30pro充电多久满)

  • 荣耀手环5nfc版和标准版有什么区别(荣耀手环5NFC版怎么设置中文)

    荣耀手环5nfc版和标准版有什么区别(荣耀手环5NFC版怎么设置中文)

  • 网络协议的三个基本要素(网络协议的三个组成部分)

    网络协议的三个基本要素(网络协议的三个组成部分)

  • oppo breeno是什么(oppo手机breeno是什么意思)

    oppo breeno是什么(oppo手机breeno是什么意思)

  • hd高清与bd高清的区别(高清和hd高清哪个更清楚)

    hd高清与bd高清的区别(高清和hd高清哪个更清楚)

  • 计算机上ce键叫什么(计算机上的ce键是干什么用的)

    计算机上ce键叫什么(计算机上的ce键是干什么用的)

  • 手机拍照为什么相册不显示(手机拍照为什么有时候是横的)

    手机拍照为什么相册不显示(手机拍照为什么有时候是横的)

  • vivoy93支持无线充电吗(vivoy9支持无线充电吗)

    vivoy93支持无线充电吗(vivoy9支持无线充电吗)

  • 苹果扩容机有什么影响(苹果扩容机不值钱吗)

    苹果扩容机有什么影响(苹果扩容机不值钱吗)

  • 文档边框怎么弄(文档边框怎么设置)

    文档边框怎么弄(文档边框怎么设置)

  • 酷狗音乐收音机在哪里(酷狗音乐收音机下载)

    酷狗音乐收音机在哪里(酷狗音乐收音机下载)

  • 短信呼服务是不是拉黑(短信呼服务是不是被警察监控了)

    短信呼服务是不是拉黑(短信呼服务是不是被警察监控了)

  • 华为手机智慧识屏在哪(华为手机智慧识物在哪里开启啊)

    华为手机智慧识屏在哪(华为手机智慧识物在哪里开启啊)

  • 年末暂估成本是否进行纳税调整处理
  • 新注册公司没有员工怎么报个税
  • 代开运输发票会不会造成重复征税
  • 所得税的账务处理流程
  • 收到投资款的会计科目
  • 职工教育经费8%怎么算
  • 汇款出国规定
  • 收款凭证填写模板下载
  • 增值税普通发票需要交税吗
  • 盈余公积要是提多了能转回么
  • 企业长期股权投资中发生的相关费用处理方法正确的有
  • 建筑企业升资质主管单位
  • 公司前期没有收入开支怎么记账
  • 不缴地税国税可停票吗?
  • 小微企业所得税减免政策2023
  • 外包劳务费用如何计算
  • 1697508131
  • 开给销货方红字信息表如何做账?
  • windows11禁止自动更新
  • win7系统步骤
  • 在线测网速准吗
  • win7为什么现在不能用了
  • Remoterm.exe - Remoterm是什么进程 有什么用
  • PHP:apache_setenv()的用法_Apache函数
  • 企业员工个人所得税申报流程
  • php数组函数输出《咏雪》里有多少"片"字
  • seti@home.exe - seti@home是什么进程 有什么用
  • 计提企业所得税会计分录怎么做
  • 稿酬所得计入什么科目
  • 栖息在树林中
  • yolov5m
  • 核定征收开票超过限额
  • 挂靠公司收费几个点
  • phpstudy删除
  • 再生资源回收公司会计科目
  • ieee compel 2021
  • 兼职人员属于雇主吗
  • 税法上未投入使用的无形资产摊销所得税能扣除吗
  • 核定征收方式包括哪几种
  • 建账的三个基本步骤
  • sql server如何查看本地的登录名和密码
  • 购入交易性金融资产的相关税费计入
  • 个体户经营所得税率表
  • 小规模纳税人销售商品会计分录
  • 如何结转完工入库的产品成本
  • 固定资产清理残料收入
  • 小规模在税务局开专票需要什么材料
  • 定额备用金与非备用金
  • 开票key
  • 在建工程转固定资产凭证附件
  • 应收账款平账怎么处理
  • 公司现金支票取钱需要带什么资料
  • 项目完工后员工工作总结
  • mac 电脑出现问题而重新启动
  • 如何避免系统性风险
  • ubuntu14.04启动不了
  • 苹果mac怎样
  • centos7rz
  • pe硬盘安装win7系统教程
  • w8系统怎么连接投影仪
  • linux默认文件大小
  • win7开机无法连接所有网络驱动器
  • 新版电脑装win7
  • cocos安装
  • android消息队列使用
  • 着色器模型
  • nodejs文件操作
  • linux保存
  • 简述javascript
  • javascript definitive guide
  • 也论主板的扩展性
  • 安卓 centos
  • python操作db2数据库
  • javascript高级教程pdf
  • Android boot.img制作
  • 小规模纳税人租金收入增值税税率
  • 江苏电子税务局网站官网
  • 潍坊税务局上班时间表
  • 发现个人所得税被物业挂职
  • 手机的海关税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设