在vue3做tabs切換功能的時(shí)候，如果導(dǎo)入的組件不適用shallowRef包裹會(huì)顯示下面的警告：
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>根據(jù)提示代碼修改如下：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-835217.html
<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>就能解決上面的問(wèn)題。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-835217.html
到了這里，關(guān)于vue3動(dòng)態(tài)組件組件shallowRef包裹問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
