vue3 的 watch 不能监视 toRef 的值


* 情况一let props = withDefaults(defineProps<{ list: Array<any> }>(), {list: () => [],})const list = toRef(props.list)watch(list.value, (newVal, oldVal) =>{console.log('newVal=', newVal)  })---------------------------------------------------------------------------------------------* 情况二let props = withDefaults(defineProps<{ list: Array<any> }>(), {list: () => [],})watch(() => ({...props}), (newVal, oldVal) => {console.log('newVal=', newVal)  },  { immediate: true, deep: true },)

情况一中的watch是无效的,
因为,
toRef创建了一个 ref,但是,它只会在首次渲染时获取 props.list 的值,之后不再追踪其变化,
所以,
为了在子组件中响应式地追踪 props.list 的变化,你应该直接在watch使用 props.list而不是 toRef
这样就能确保,子组件,能够正确地获取到父组件传递的更新后的值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855695.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nuxt快速学习开发---Nuxt3视图Views

Views Nuxt提供了几个组件层来实现应用程序的用户界面 默认情况下&#xff0c;Nuxt 会将app.vue文件视为入口点并为应用程序的每个路由呈现其内容 应用程序.vue <template> <div> <h1>Welcome to the homepage</h1> </div> </template> …

【杂记-浅谈Sequence Number/序列号】

文章目录 一、Sequence Number序列号概述二、Sequence Number序列号作用三、Sequence Number的工作原理及重要性 一、Sequence Number序列号概述 Sequence Number&#xff0c;即序列号&#xff0c;是计算机网络中TCP/IP协议的一个重要概念&#xff0c;主要用于保证数据传输的可…

油猴hook+内存爆破

hook方式 说明&#xff1a;来回翻页发现只有请求体的token需要逆向&#xff0c;而这个请求体是在params里&#xff0c;拼接到url里&#xff0c;可以直接用油猴hook url里的关键字token。 正常步骤 hook代码 // UserScript // name hookparams // namespace htt…

【C语言】扫雷游戏

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

springBoot多数据源使用、配置

又参加了一个新的项目&#xff0c;虽然是去年做的项目&#xff0c;拿来复用改造&#xff0c;但是也学到了很多。这个项目会用到其他项目的数据&#xff0c;如果调用他们的接口取数据&#xff0c;我还是觉得太麻烦了。打算直接配置多数据源。 然后去另一个数据库系统中取出数据…

深信服科技:2023网络钓鱼趋势分析报告

随着互联网的快速发展和广泛应用&#xff0c;网络钓鱼活动带来的安全隐患愈演愈烈。因应威胁发展&#xff0c;我 们编撰了此份分析报告&#xff0c;旨在全面了解其发展态势&#xff0c;并提醒相关部门、企业和公众加强防范。 在本报告中&#xff0c;我们将详细梳理网络钓鱼的近…

IBM,开始构建以量子为中心的超级计算机

6月6日&#xff0c;IBM与Pasqal宣布了一项重大合作!IBM和Pasqal打算合作开发一种以量子为中心的超级计算的通用方法并促进化学和材料科学的应用研究。IBM和Pasqal将与高性能计算领域的领先机构合作&#xff0c;为以量子为中心的超级计算奠定基础——将量子计算与先进的经典计算…

深度神经网络(DNN)详解

1.1 神经网络 神经网络是由人工神经元&#xff08;节点&#xff09;组成的网络结构。每个神经元接收输入信号&#xff0c;经过加权处理和激活函数转换&#xff0c;产生输出信号。基本的神经网络结构包括输入层、隐藏层和输出层。 1.2 深度学习 深度学习是机器学习的一个分支…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第44课-骨骼动画

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第44课-骨骼动画 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎&…

开放式耳机哪个牌子好?2024五大闭眼入开放式耳机推荐!

想要购买开放式耳机&#xff0c;但面对很多品牌和型号&#xff0c;是否感到无从下手&#xff1f;别担心&#xff0c;作为耳机发烧友和测评专家&#xff0c;我为大家带来了几款热门开放式耳机的横向对比。从各个方面进行详细对比&#xff0c;还有我自己觉得还不错的五款开放式耳…

微型导轨的摩擦系数分析!

微型导轨的摩擦力主要包括滑动摩擦力和滚动摩擦力&#xff0c;摩擦系数是一个关键参数&#xff0c;它决定了滑块在导轨上运动时所受到的摩擦力大小&#xff0c;摩擦系数越低&#xff0c;系统的运动效率和精度就越高&#xff0c;而微型导轨的摩擦系数是受多个因素影响的。 微型导…

【docker hub镜像源失效】2024年6月6日 docker 国内镜像源失效

文章目录 概述中科大镜像源阿里镜像源其他镜像源可用的镜像源写在最后 之前违反社区规定了&#xff0c;做了和谐 概述 大家都知道使用docker hub官方镜像需要魔法&#xff0c;虽然大部人有魔法&#xff0c;但是网速也是很慢&#xff0c;还有部分同学没有&#xff0c;全靠国内各…

移远通信发布高性价比智能模组SC200P系列,赋能金融支付等行业智慧升级

近日&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;为满足智慧金融、智能家居、智能穿戴、工业手持等消费和工业应用对高速率、多媒体、长生命周期等终端性能的需求&#xff0c;其正式推出基于紫光展锐UNISOC 7861平台的全新8核4G智能模组SC200P系列…

C语言结构体位域(位段)使用

C语言中的结构体位域&#xff08;也称为位段&#xff09;是一种特殊的数据结构&#xff0c;它允许程序员以位为单位来定义和操作结构体中的成员变量。位域的使用主要目的是为了节省存储空间和实现对硬件寄存器的直接访问&#xff0c;尤其是在嵌入式系统编程中非常有用。位域的声…

关于INCA的几个实用功能

01--VUI窗口设计 这个可以按照自己的想法设计INCA观测或标定窗口 首先进入到INCA的环境内&#xff0c;点击实验→加载VUI窗口 选择空的窗口 打开后如下所示&#xff1a; 点击UI开发模式&#xff0c;如下图 如下&#xff1a; 添加标定量、观测量、示波器 窗口的大小需要在开发…

ProtoBuf序列化协议简介

首先&#xff0c;常见的序列化方法主要有以下几种&#xff1a; TLV编码及其变体(tag, length, value)&#xff1a; 比如ProtoBuf。文本流编码&#xff1a;XML/JSON固定结构编码&#xff1a;基本原理是&#xff0c;协议约定了传输字段类型和字段含义&#xff0c;和TLV类似&…

家庭财务新助手,记录收支明细,一键导出表格,让您的家庭财务一目了然!

在繁忙的现代生活中&#xff0c;家庭财务管理常常成为一项令人头疼的任务。如何记录每一笔收支&#xff0c;如何清晰地掌握家庭财务状况&#xff0c;如何合理规划未来开支&#xff0c;这些都是我们需要面对的问题。然而&#xff0c;有了这款家庭财务助手——晨曦记账本&#xf…

【启明智显产品介绍】Model3工业级HMI芯片详解系列专题(一):芯片性能

Model3工业级跨界MCU是一款国产自主的基于RISC-V架构的高性能芯片&#xff0c;内置平头哥玄铁E907&#xff0c;主频480MHz&#xff0c;片上1MB大容量SRAM以及64Mb PSRAM。 Model3工业级MCU具有丰富的屏接口、高分辨率PWM和多路高精度定时器&#xff0c;可以处理各类实时数据与实…

录屏软件OBS简单使用

录屏软件OBS简单使用 官网下载地址&#xff1a; https://obsproject.com/ window解压直接使用版&#xff1a; 链接: https://pan.baidu.com/s/1495KDkvuDnjqdOvm1IG4Fw 提取码: 9xcr 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 简单使用 解压 解压window解…

深度学习(十一)——神经网络:线形层及其他层介绍

一、正则化层中nn.BatchNorm2d简介 主要作用&#xff1a;对输入函数采用正则化。正则化的主要作用是加快神经网络的训练速度。 class torch.nn.BatchNorm2d(num_features, eps1e-05, momentum0.1, affineTrue, track_running_statsTrue, deviceNone, dtypeNone)输入参数&…