vue3setup语法糖中动态切换组件

最新推荐文章于 2024-03-18 21:55:03 发布
最新推荐文章于 2024-03-18 21:55:03 发布
阅读量515 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61848095/article/details/130948013
版权

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使用component组件时报的一个警告，大致意思就是，将一个组件作为响应式对象进行了处理，这可能导致不必要的性能开销。

markRaw函数可以用于标记一个对象，告诉Vue不要将其转换为响应式对象。这对于将组件作为数据进行处理时非常有用。

另一种选择是使用shallowRef来创建一个浅层的响应式引用。与ref不同，shallowRef只会对引用本身进行响应式处理，而不会对引用的值进行深层次的观测。这对于将组件作为响应式数据使用时也是一个有效的选择。

解决方法：

 currentView.value = row.type === '全局' ? markRaw(GroupDialog) : markRaw(UserRelationList)

每天都要喝奶茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue3】动态组件切换
weixin_51290060的博客
03-20 1462
动态组件切换
在vue3+ts+setup语法糖中使用图片预览组件
09-14
在vue3+ts+setup语法糖中使用图片预览组件，下载直接安装运行
vue中用动态组件实现选项卡切换效果
08-31
本篇文章主要介绍了vue中用动态组件实现选项卡切换效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3中的动态组件，使用动态组件实现页面的切换。
一起学习
12-01 1553
本文主要介绍Vue3中的动态组件，使用动态组件实现页面的切换。
Vue3 动态切换组件component
最新发布
缘如风的博客
03-18 548
Vue3选项式、组合式两种写法实现component的动态切换
vue3 TS 使用 component is 动态加载组件的正确用法
pan-zy的专栏
10-08 7286
<template> <div> <div id="nav"> <ul> <li @click="onCompChange('CompA')">第一个组件</li> <li @click="onCompChange('CompB')">第二个组件</li> </ul> </div> asdfas &
vue3动态组件警告提示
yuanwen52的博客
12-19 830
出现此警告只需将组件用markRaw函数包裹即可。
component with `markRaw` or using `shallowRef` instead of `ref`.
Cxiaomu的博客
08-01 380
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`. Component that was made reactive:
vue3+ts项目运行过程中遇到的错误简记
橘子花会开
11-06 3777
vue3+t开发问题简记
Vue3 warn
shiki0083的笔记
05-27 852
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`. Component that was made reactive:
Vue切换Tab动态渲染组件的操作
10-14
主要介绍了Vue切换Tab动态渲染组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue动态组件实现选项卡切换效果
12-29
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码，供大家参考，具体内容如下 导航按钮： <p click=a><router to='/collectnewcars'>新车</router></p> <p click=a><router to='/...
vue3 使用 ref 的性能警告
mrhaoxiaojun的博客
12-21 1994
问题 代码警告 <template> <div> <component :is="currentTabComponent"></component> </div> </template> <script setup> import { ref,shallowRef } from "vue"; import TodoList from "./components/TodoList.vue"; import
（vue3）动态组件
weixin_45959965的博客
04-09 1261
什么是动态组件 就是：让多个组件使用同一个挂载点，并动态切换，这就是动态组件。:is=”组件 ,通过is 切换 A B 组件。
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 5185
问题描述 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中组件切换
qq_47997447的博客
06-28 1288
vue3组件之间切换
vue3报警告：Vue received a Component which was made a reactive object. This can lead to unnecessary perf
zhang_zan
02-28 1161
vue3报警告：Vue received a Component which was made a reactive object. This can lead to unnecessary perf
vue使用动态组件实现TAB切换效果
m0_61663332的博客
12-22 9056
vue移动端使用动态组件实现tab切换效果
vue3 setup语法糖 监听动态路由的变化
08-12
Vue 3 的 `setup` 语法糖可以用于在组件中编写逻辑代码。要监听动态路由的变化，你可以使用 `watch` 函数来实现。下面是一个示例： ```javascript import { watch, ref } from 'vue'; export default { setup() { const routeParams = ref(null); watch( () => $route.params, // 监听 $route.params 对象 (newParams) => { // 在路由参数变化时执行的逻辑 // 可以在这里更新组件的状态或执行其他操作 routeParams.value = newParams; } ); return { routeParams }; } } ``` 在上面的示例中，我们使用了 `watch` 函数来监听 `$route.params` 对象，它包含了动态路由的参数。当路由参数发生变化时，`watch` 会调用传入的回调函数，我们可以在这个回调函数中执行相应的逻辑操作。在这个例子中，我们将新的路由参数赋值给 `routeParams` 变量。 请确保在组件中正确引入 Vue 3 的相关模块（如 `watch` 和 `ref`），并且 `$route` 对象可以通过 `this.$route` 或 `this.$router.currentRoute` 来获取。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值