【vue3】ObjectRefImpl取不到值 vue3【已解决】

最新推荐文章于 2025-03-26 11:52:44 发布

原创

最新推荐文章于 2025-03-26 11:52:44 发布 · 1.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章目录

问题描述
解决方案：

问题描述

vue3项目中使用toRefs解构父组件传给子组件的值
在这里插入图片描述

#获取不到data值
<script setup lang="ts">
...
interface propsInterface {
   
   
  data:any
  formObj?:any
  isRevoke?:boolean
}
let props = withDefaults(defineProps<propsInterface>(),{
   
   
  data:{
   
   },
  formObj:{
   
   }

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

沉默小管

关注关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Vue3 - 解决报错警告 Vue received a Component which was made a reactive object. This can lead to unnecessar

资深程序员

07-29

3489

vue3，nuxt3，报错，警告，VuereceivedaComponentwhichwasmadeareactiveobject.Thiscanleadtounnecessaryperformanceoverhead,andshouldbeavoidedbymarkingthecomponentwithmarkRaworusingshallowRefinsteadofref.Componentthatwasmadereactive，

Vue3新特性全面剖析

每天都要努力学习哦~~

12-20

1632

一款框架诞生需要的阶段查看版本:npm view vue versions 开发 alpha版：内部测试版 α beta版：公开测试版 β rc版：Release Candidate（候选版本） stable版：稳定版 npm i vue@lasted:下载的是vue2 vue2 vuex3 vue-router3 element-ui 2 npm i vue@next：下载的是vue3 vue3 vuex4 vue-router4 element-plus 1 npm i.

参与评论您还未登录，请先登录后发表或查看评论

Vue3的toRef和toRefs

wytccc的博客

07-11

435

【代码】Vue3的toRef和toRefs。

Vue3.0 常用响应式API的使用和原理分析(二)

lcl130的专栏

09-06

4760

reactive对传入的类型是有限制的，必须是对象或者数组。对一些基础类型，例如string, number，boolean等不支持，如果要使用reactiveAPI必须将这些基础类型封装成对象，这样显然是不太科学的。因此Vue 3.0提供了refAPI。 Ref是一个接口, 它最主要的是有一个value属性可以获取值和赋值。 export interface Ref<T = any> { value: T _shallow?: boolean } ref 使用场景将数据变为响应式

亲密接触COOKIE（二）：JavaScript 应用篇

weixin_30677617的博客

08-09

183

/** * @author 《JavaScript权威指南》蓝文雄解读整理 * 本文档介绍JavaScript对cookie的操作 * 关于基础知识，请参考我的博客http://vincent-lwx.blog.sohu.com/96751243.html或http://www.cnblogs.com/vincent-lwx/archive/2008/08/08/126380...

【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

01-26

5791

问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型解决办法在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de

vue3报警告：Vue received a Component which was made a reactive object. This can lead to unnecessary perf

zhang_zan

02-28

3495

vue3报警告：Vue received a Component which was made a reactive object. This can lead to unnecessary perf

Vue received a Component which was made a reactive object. This can lead to unnecessary performance

叮当的猫猫的博客

08-04

7654

总之，如果你将一个Vue组件对象转换为响应式对象，可能会导致不必要的性能开销，因此建议使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。为了避免这种情况，Vue建议使用"markRaw"方法将组件对象标记为非响应式对象，或者使用"shallowRef"代替"ref"来创建一个浅响应式对象。在上面的代码中，我们使用"markRaw"方法将"MyComponent"组件对象标记为非响应式对象，避免了将组件对象转换为响应式对象的情况。

Vue received a Component which was made a reactive object.

Dawnchen1的博客

06-16

3371

报错原因：vue接收到一个组件，该组件是一个响应式对象。这可能会导致不必要的性能开销，应该通过使用’ ‘或使用’ ‘而不是’ '来避免。解决办法：使用或者’ '将组件设置为非响应式

objectrefimpl取不到data

热门推荐

寿春

08-07

1万+

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.

vue3 警告： Vue received a Component that was made a reactive object. This can lead to unnecessary perf

ili_ii的博客

03-26

1721

这意味着在Vue中，一个组件被错误地处理为了响应式对象，这可能导致不必要的性能开销。Vue建议通过使用markRaw或shallowRef而不是ref来避免这种情况。问题可能会出现在Router路由、自定义组件、v-for动态渲染，ref 命名等。

当vue3提示[Vue warn]: Vue received a Component which was made a reactive object.

qq_18470967的博客

12-16

1万+

当vue3提示[Vue warn]: Vue received a Component which was made a reactive object.

当vue3提示[Vue warn] Vue received a Component which was made a reactive object

m0_67401920的博客

03-10

2323

解决方案开题直接放解决方案，不墨迹，解决方案很简单，提示你去给组件使用markRaw or shallowRef包起来就好了，我直接使用了markRaw来包起组件 // 直接包起来 import { markRaw } from 'vue' 直接在应用组件那里包起来就好了，就不会报错了前言当我在使用到一个组件的时候，他报了这么一个警告错误的提示地方，通过这个错误的定位是在我使用这些个edit组件里面报的，这些个组件是由elementPlus引入的警告分析先分析一下我这个警告的原因我这

Vue received a Component that was made a reactive object. This can lead to unnecessary performance

valsedefleurs的博客

01-05

7358

但是，在某些情况下，将Vue组件对象转换为响应式对象是不必要的，因为组件本身是Vue的核心概念，已经具有响应式的功能，因此，如果你将一个Vue组件对象转换为响应式对象，将会出现重复观察相同的对象属性的情况，导致不必要的性能开销。将一个Vue组件对象转换为响应式对象时，可能会导致不必要的性能开销。为了避免这种情况，Vue建议使用markRaw方法将组件对象标记为非响应式对象，或者使用shallowRef代替ref来创建一个浅响应式对象。终端提示警告warning message。

Vue received a Component that was made a reactive object. This can lead to unnecessary performance o

weixin_44166849的博客

08-14

677

vue3+vite+ts 报错 Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.