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

  • 联想小新air14怎么连接蓝牙耳机(联想小新air14怎么截图)

    联想小新air14怎么连接蓝牙耳机(联想小新air14怎么截图)

  • steam无法更新连接到网络怎么解决(steam更新无法连接到更新服务器)

    steam无法更新连接到网络怎么解决(steam更新无法连接到更新服务器)

  • 荔枝vip和爱奇艺vip可以通用吗(荔枝会员和奇异果会员哪个好)

    荔枝vip和爱奇艺vip可以通用吗(荔枝会员和奇异果会员哪个好)

  • 抖音哪里可以看访客记录(抖音哪里可以看注册时间)

    抖音哪里可以看访客记录(抖音哪里可以看注册时间)

  • 快手小店打不开是怎么回事(快手小店打不开了,无法查订单)

    快手小店打不开是怎么回事(快手小店打不开了,无法查订单)

  • 三星手机自带应用商店(三星手机自带应用商店下载)

    三星手机自带应用商店(三星手机自带应用商店下载)

  • vivo手机怎么设置双卡模式(vivo手机怎么设置呼叫转移)

    vivo手机怎么设置双卡模式(vivo手机怎么设置呼叫转移)

  • 华为手机通知栏不显示信息怎么办(华为手机通知栏信息怎么找回)

    华为手机通知栏不显示信息怎么办(华为手机通知栏信息怎么找回)

  • 抖音永久封禁什么时候可以登录(抖音永久封禁什么注销)

    抖音永久封禁什么时候可以登录(抖音永久封禁什么注销)

  • 设置主页为使用默认页(设置主页为使用默认值怎么设置)

    设置主页为使用默认页(设置主页为使用默认值怎么设置)

  • 授权失败是什么意思(授权失败,请重试)

    授权失败是什么意思(授权失败,请重试)

  • 快手账号异常收不到语音验证码(快手账号异常收不到信息)

    快手账号异常收不到语音验证码(快手账号异常收不到信息)

  • 华为nova4屏幕尺寸是什么(华为nova4屏幕尺寸多大)

    华为nova4屏幕尺寸是什么(华为nova4屏幕尺寸多大)

  • 二极管是什么控制元件(二极管是什么控制元三)

    二极管是什么控制元件(二极管是什么控制元三)

  • 手机必须充满才能拔吗(手机一定充满才能拔掉吗)

    手机必须充满才能拔吗(手机一定充满才能拔掉吗)

  • txt后缀是什么文件

    txt后缀是什么文件

  • 苹果ipada1566是什么型号(苹果ipada1566是什么型号几代)

    苹果ipada1566是什么型号(苹果ipada1566是什么型号几代)

  • ansys哪个版本是中文版(ansys哪一版比较好用?)

    ansys哪个版本是中文版(ansys哪一版比较好用?)

  • 华为移动服务是做什么的(华为移动服务是什么问题)

    华为移动服务是做什么的(华为移动服务是什么问题)

  • 网络需登录认证什么意思(网络需登录认证怎么弄)

    网络需登录认证什么意思(网络需登录认证怎么弄)

  • 计算机上on键代表什么(计算机on键是什么键)

    计算机上on键代表什么(计算机on键是什么键)

  • 华为标准限制是几个进程(华为手机标准限制是几个)

    华为标准限制是几个进程(华为手机标准限制是几个)

  • 苹果x日历不显示节假日(苹果x日历不显示父亲节)

    苹果x日历不显示节假日(苹果x日历不显示父亲节)

  • ipad mini5 64g够用吗

    ipad mini5 64g够用吗

  • 怎么看qq会员是谁充的(怎么看qq会员是不是自动续费)

    怎么看qq会员是谁充的(怎么看qq会员是不是自动续费)

  • 微信特殊格式如何转换(微信的格式是怎么设置的)

    微信特殊格式如何转换(微信的格式是怎么设置的)

  • linux 重启命令(linux重启命令网卡)

    linux 重启命令(linux重启命令网卡)

  • 微信卡是什么原因(微信卡的厉害什么原因)

    微信卡是什么原因(微信卡的厉害什么原因)

  • CUDA(10.2)+PyTorch安装加配置 详细完整教程

    CUDA(10.2)+PyTorch安装加配置 详细完整教程

  • 外管证是在当地办理还是在外地办理
  • 流动资产周转天数下降说明什么
  • 土地增值税间接费用扣除
  • 劳务报酬自行申报时间
  • 零申报资产总计不能为零
  • 个体户超过3万交个人所得税
  • 土地出让金计算方法
  • 暂时性差异乘以税率
  • 有现金折扣方式有哪些
  • 当月开的发票次月预缴税款行得通吗?
  • 以股权投资入股放高利贷违法吗
  • 货币的时间价值名词解释
  • 小规模纳税人转成一般纳税人条件
  • 企业所得税核定征收怎么计算
  • 企业发生的销售折让
  • 应收账款的周转率怎么算
  • 办公室设计费取费标准一览表
  • 企业备用金用途
  • 证券公司手续费怎么收
  • 带息票据贴现金额怎么算
  • 营业额和营业收入怎么填写
  • 职工的经济补偿金是优先债权吗
  • 最新早上好图片大全集
  • 什么是电子发票图片
  • 主营业务成本算损益类科目吗
  • 收到苗木发票怎么做账
  • 桌面级cpu天梯图2023
  • win10为什么毛病这么多
  • 用php制作日历2020日历表
  • 私账转到公账怎么办
  • 调制解调器的作用包括
  • config.cfg是什么文件
  • 实际发放股票股利为什么股本增加
  • PHP:imagefontwidth()的用法_GD库图像处理函数
  • 债券转换是什么意思
  • laravel实战教程
  • 开发费用怎么入账
  • php事件机制
  • 苹果系统推送通知
  • 简易计税结转账务处理
  • 固定资产被替换的账面价值怎么算
  • html前端开发教程
  • python 多线程处理
  • 政府奖励收入会计分录
  • sqlserver 存储过程 临时表
  • sqlserver数据导入mysql
  • 小规模纳税人利润表季报
  • 个人承担的个税是公司的成本费用吗
  • 留存收益怎么做
  • 高速公路过路费可以抵扣进项税吗
  • 个贷系统平账专户怎么做账
  • 备用金分为哪两种
  • 免征的增值税账务处理
  • 退回的个税手续费如何账务处理
  • 投资收益期末余额在借方还是贷方
  • 未达到起征点的税金怎么做凭证
  • 中药饮片盘点损耗率 法律
  • 企业一般账户开户申请理由
  • 本年利润年末有余额怎么回事
  • 在sql server中关于数据库的说法正确的是
  • mysql重置初始密码
  • 卡巴斯基 试用
  • microsoft window vista
  • issch.exe
  • 微软安全信息如何替换
  • windows7包含6个版本其中什么最强大支持的功能最多
  • linux swap和mem
  • launcher.exe是什么程序
  • opengl vs2017
  • shell脚本switch
  • Web Inspector:关于在 Sublime Text 中调试Js的介绍
  • linux shell函数
  • 有没有改善
  • 安卓数据网络
  • unity2d寻路
  • javascript怎么样
  • 1、BluetoothChat之BluetoothChat.java
  • 投资性房地产如何合并抵消
  • 厦门税务地区编号
  • 扬州退契税政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设