首页 > 其他分享 >Vue3 toRef响应式失效问题排查

Vue3 toRef响应式失效问题排查

时间:2023-08-21 16:13:06浏览次数:38  
标签:info const value toRef 排查 Vue3 组件 stuNum

父组件

const stuRecordInfo = ref<any>({
  stuNum: 11111
})

// 接口请求返回
stuRecordInfo.value.stuNum = 22222


<StuRecord :info="stuRecordInfo" :pictureInfo="pictureInfo" />

子组件

const info = toRef(props, 'info')
const stuNum = toRef(info.value, 'stuNum')
stuNum.value = 33333

console.log(info.value.stuNum) // 22222
console.log(stuNum.value) // 33333

原因:
const info = toRef(props, 'info') // 跟随父组件变化

const stuNum = toRef(info.value, 'stuNum') // 初始化时获取引用,info变化时,不跟随变化

标签:info,const,value,toRef,排查,Vue3,组件,stuNum
From: https://www.cnblogs.com/huangtq/p/17646272.html

相关文章

  • 视频直播点播平台EasyDSS排查WebRTC搭建TURN服务时openssl路径问题。
    我们曾经介绍了WebRTC所必需的STUN/TURN服务,并尝试了在Windows上搭建TURN服务的过程。为了在Windows上编译并使用TURN服务,我们需要安装Cygwin64环境,并进行相应的配置和编译工作。然而,在我们下载、编译和安装coturn时,遇到了一个报错:“ERROR:OpenSSLCrypto开发库未在所需位置正确安......
  • 记一次CMS GC耗时46.6秒的排查过程与解决方法
    「早上7.16分左右」 ,有个服务发生了紧急告警,很多接口超时,出于 「客户的投诉」 和老板的给出的压力,我开始了排查之旅~~~❝【排查到最后发现,并不是这些超时的接口都有问题,而是 「其中某一个接口影响了整个服务」,只要是这个服务上的接口,都有可能超时、异常、等不正常现象】❞看下......
  • vue3探索——组件通信之事件总线
    Vue2.x使用EventBus进行组件通信,而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus,mitt.js好在哪里呢?首先它足够小,仅有200bytes,其次支持全部事件的监听和批量移除,它还不依赖Vue实例,所以可以跨框架使用,React或者Vue,甚至jQuery项目都能使用同一套库。安装使用yarn安装yarn......
  • 软件调试与问题排查的修炼之路与实战经验
    久经沙场,才能练就丰富经验与实战能力。调试调试,调整与测试。那些机械工程师通常需要对仪器参数进行设置以便能够更好的观察。软件调试有种类似的含义,比如高级工程师会对一些参数进行设置以便达到更好的性能优化。而在通常意义上,调试通常是指对不合预期的状态进行定位、调......
  • vue3 vite后台管理模板项目打包报错 Some chunks are larger than 500 KiB after mini
    ​ 1、错误原因分析:超过块大小限制,块大小默认500KB2、解决办法:在vite.config.js中增加output配置项build:{chunkSizeWarningLimit:1500,//调整包的大小rollupOptions:{output:{//最小化拆分包manualChunks(id){......
  • vue3常见的难点
    vue中params和query的区别,以及具体用法:https://blog.csdn.net/weixin_42282727/article/details/107505014route、router区别:https://blog.csdn.net/m0_67948827/article/details/127051410......
  • 线上出现oom问题如何排查?
    一.造成oom的原因?1.一次性申请的数据太多,比如一次性获取的数据放到list过多,可以分页查询等2.内存未释放,比如使用jdbc大量连接无法释放,线程池拒绝策略未抛出异常,使用submit等待返回结果一直被阻塞,导致对象一直无法被回收,(因为程序无法结束),可以抛出异常,或者使用池化技术解决。3.本......
  • vue3新语法糖——setup script
    vue3新语法糖——setupscriptCoCoyY12021-03-2712:5241480 前言vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了。那么在使用vue3compositionAPI的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法,然后发现模板需要使用该方法,然后就必须将方法返回......
  • 生产故障排查思路
    一.常见的生产故障有哪些?在生产环境中,常见的故障类型包括但不限于以下几种:1.网络故障:网络故障可能包括网络连接中断、网络延迟过高、路由错误等。这可能导致系统无法正常访问外部资源,或导致应用程序无法与其他系统进行通信。2.服务器故障:服务器故障可能包括硬件故障、操作系统......
  • 谈谈Vue3中的ref和reactive
    一、是什么?ref和reactive是Vue3中用来实现数据响应式的API一般情况下,ref定义基本数据类型,reactive定义引用数据类型(我喜欢用它来定义对象,不用它定义数组,原因后面讲)我理解的ref本质上是reactive的再封装二、先聊reactivereactive定义引用数据类型(以对象和数组举例),它能够将复......