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

  • 微信怎么扫自己的图片(微信怎么扫自己手机上的二维码付款)

    微信怎么扫自己的图片(微信怎么扫自己手机上的二维码付款)

  • 小米10s打字声音在哪里关掉(小米10s打字声音怎么设置)

    小米10s打字声音在哪里关掉(小米10s打字声音怎么设置)

  • dareu键盘灯光怎么切换(dareu键盘灯光怎么调亮度)

    dareu键盘灯光怎么切换(dareu键盘灯光怎么调亮度)

  • 快手平台怎么申请平台介入(快手平台怎么申请运费险)

    快手平台怎么申请平台介入(快手平台怎么申请运费险)

  • 华为平板横屏竖屏设定(华为平板横屏竖屏设置不同壁纸)

    华为平板横屏竖屏设定(华为平板横屏竖屏设置不同壁纸)

  • 拼多多一个人可以开几个店铺(拼多多一个人可以助力同一个人两次吗)

    拼多多一个人可以开几个店铺(拼多多一个人可以助力同一个人两次吗)

  • word保存pdf显示出现意外(word保存pdf显示无法打开文件)

    word保存pdf显示出现意外(word保存pdf显示无法打开文件)

  • 相册打不开闪退怎么办(相册打开就闪退怎么办)

    相册打不开闪退怎么办(相册打开就闪退怎么办)

  • 苹果store下载不了app怎么办(iphone store下载不了)

    苹果store下载不了app怎么办(iphone store下载不了)

  • QQ语音一会免提一会就听筒(qq语音一会免提一会听筒)

    QQ语音一会免提一会就听筒(qq语音一会免提一会听筒)

  • 苹果录屏可以录通话吗(苹果录屏可以录声音吗)

    苹果录屏可以录通话吗(苹果录屏可以录声音吗)

  • 华为p30用的是Z轴马达吗(华为P30用的是什么屏幕)

    华为p30用的是Z轴马达吗(华为P30用的是什么屏幕)

  • 手机下载的软件打不开怎么办(手机下载的软件在哪个文件夹)

    手机下载的软件打不开怎么办(手机下载的软件在哪个文件夹)

  • 苹果怎么设置下载软件需要密码(苹果怎么设置下载不需要输入ID密码)

    苹果怎么设置下载软件需要密码(苹果怎么设置下载不需要输入ID密码)

  • GN是什么东西(gn意思)

    GN是什么东西(gn意思)

  • 淘宝海外版叫什么(淘宝店铺海外版)

    淘宝海外版叫什么(淘宝店铺海外版)

  • 安卓手机如何清理垃圾(安卓手机如何清理内存)

    安卓手机如何清理垃圾(安卓手机如何清理内存)

  • 华为nova5pro耳机设置教程(华为nova5pro耳机孔在哪里怎么插)

    华为nova5pro耳机设置教程(华为nova5pro耳机孔在哪里怎么插)

  • 小米手机如何关闭上滑(小米手机如何关闭自动接听)

    小米手机如何关闭上滑(小米手机如何关闭自动接听)

  • ipad分屏悬浮窗怎么关(ipad分屏悬浮窗口怎么开启)

    ipad分屏悬浮窗怎么关(ipad分屏悬浮窗口怎么开启)

  • 小米6怎么扩展内存(小米6怎么扩展内存卡)

    小米6怎么扩展内存(小米6怎么扩展内存卡)

  • s10反向充电设置(s105g反向充电)

    s10反向充电设置(s105g反向充电)

  • 小米9有多重(小米9重量为多少g)

    小米9有多重(小米9重量为多少g)

  • 微信为何不能收红包(微信为何不能收付款)

    微信为何不能收红包(微信为何不能收付款)

  • 家里财产分割
  • 回购股票为什么股价下跌
  • 当月购入固定资产计提折旧吗
  • 生产用天然气如何入账
  • 受托代销商品款是什么科目
  • 总公司签合同发票由分公司开可以吗
  • 跨年度冲红的账务处理
  • 加计抵减的税额多长时间
  • 委托邮政企业投诉电话
  • 预提费用下月要冲回吗
  • 失业社保补助金领取条件
  • 建筑物加高违法么
  • 销售库存商品计入什么科目
  • 房租本月入账上月的怎么摊销?
  • 支付明年报刊费
  • 公司购买电脑费用怎么报销
  • 技术转让收入是指当事人履行
  • 缴纳增值税的计税依据
  • 购买方红字信息表开具流程图
  • 独立核算分公司可以享受小型微利企业优惠吗
  • 房地产收费依据与标准
  • 固定资产的残值怎么算出来的
  • 确认递延收益纳税调整吗
  • 怎么进入登录
  • 预付会议费会计分录
  • 细说linux
  • iis6配置php网站
  • 苹果手机下载爱思极速版有什么影响
  • 怎么区分债券折价还是溢价
  • 财政补助收入的账务处理
  • SCHDPL32.EXE - SCHDPL32是什么进程 有什么用
  • linux系统如何更改主机名
  • 个人所得税账务处理分录怎么做
  • 进项抵扣发票如何查询
  • sec是什么文件
  • 普通发票丢了如何入账
  • PHP:mcrypt_module_self_test()的用法_Mcrypt函数
  • 集体租赁住房有房产证吗
  • 企业资产损失所得税税前扣除
  • 公司制作横幅计入什么科目?
  • jquery版本
  • 正在求偶的凤头卡拉鹰,美国德克萨斯州 (© Alan Murphy/Minden Pictures)
  • 微信公众号开发php源码
  • vue-cli2.0
  • 强化学习——Q-Learning算法原理
  • PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
  • shell和pycharm
  • 当天的电子发票怎么开
  • 汇算清缴如何调报表
  • 其他应付款的账户结构
  • 车票增值税抵扣怎么操作
  • 土地使用权是指企业所拥有的
  • 外经证办好了后怎么开票
  • 库存商品结转成本的金额怎么计算
  • 跨月的普通发票能作废吗
  • 非税收入一般缴款书是什么意思
  • 办理股权转让需要多久时间
  • 进项税转出怎样做账务处理
  • 现金不够老板垫钱怎么办
  • 影响折旧的因素有哪三个方面
  • 社保的会计核算方法
  • SQLServer:探讨EXEC与sp_executesql的区别详解
  • vmware虚拟机无法打开内核设备怎么办
  • linux命令i
  • win7系统笔记本怎么连接wifi
  • linux统计代码行数过滤空行
  • ubuntu安装指南
  • jquery使用教程
  • 批处理查找字符中含有等号的子串
  • 基于web的旅游网站毕业设计
  • 手机屏幕适配
  • 详解python时间模块中的datetime模块
  • 基于javascript的毕业设计
  • js table
  • jQuery之简单的表单验证实例
  • python 基础 教程
  • 税务局副科长工资
  • 税务清单模板
  • 个人所得税完税证明图片
  • 增值税网上申报步骤可以在手机上申报吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设