vue3动态组件组件shallowRef包裹问题

在vue3做tabs切换功能的时候,如果导入的组件不适用shallowRef包裹会显示下面的警告:

javascript 复制代码
Home.vue?t=1708401434509:43 [Vue warn]: 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`. 
Component that was made reactive:  {__hmrId: '2afd162d', __file: 'D:/v3code/my-big-charts/src/components/Comp7.vue', render: ƒ} 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <RouterView> 
  at <App>

根据提示代码修改如下:

javascript 复制代码
<script setup>
import {ref,reactive,readonly,computed,watch,watchEffect,markRaw,shallowRef} from 'vue'
import Comp7 from '../components/Comp7.vue'
import Comp6 from '../components/Comp6.vue'
const activeComp = shallowRef(Comp6)
const tab = reactive([{
    name: "A组件",
    comName: shallowRef(Comp6)
}, {
    name: "B组件",
    comName: shallowRef(Comp7
}])
const change = index=>{
    activeComp.value = tab[index].comName
}
</script>
<template>
    <ul>
        <li v-for="(item,index) in tab" :key="item.name" @click="change(index)">{{ item.name }}</li>
    </ul>
    <div>
        <component :is="activeComp"></component>
    </div>
</template>

就能解决上面的问题。

相关推荐
书源1 分钟前
灵活性和可维护性,被严重低估的编程原则
前端·javascript·vue.js
计算机学姐10 分钟前
基于Python的旅游数据分析可视化系统【2026最新】
vue.js·后端·python·数据分析·django·flask·旅游
随风飞翔的胖子1 小时前
js-cookie详细介绍及在vue3中的使用方法
vue.js·浏览器
幻灵尔依2 小时前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子2 小时前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
小菜全3 小时前
Vue 3 + TypeScript 事件触发与数据绑定方法
前端·javascript·vue.js
an__ya__5 小时前
Vue数据响应式reactive
前端·javascript·vue.js
叶落阁主5 小时前
Neovim 插件 i18n.nvim 介绍
java·vue.js·vim
叫我詹躲躲5 小时前
开发提速?Vue3模板隐藏技巧来了
前端·vue.js·ai编程
@小红花6 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript