vue3 tab切换动态加载组件 性能警告问题

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.
示例警告代码

<a-tab-pane v-for="item in tabList" :key="item.key">
     <component :is="item.value" :appid="route.query.appid" />
 </a-tab-pane>
 <script setup>
import AppForm from './components/app.vue'
import App2Form from './components/app2.vue'
import App3Form from './components/app3.vue'
const tabList = [
	{
      name: app,
      value: AppForm,
      key: 'app'
    },
    {
      name: app2,
      value: App2Form,
      key: 'app2'
    },
    {
      name: app3,
      value: App3Form,
      key: 'app3'
    },
]
</script>

修改代码

 <script setup>
 import { shallowRef } from 'vue'
import AppForm from './components/app.vue'
import App2Form from './components/app2.vue'
import App3Form from './components/app3.vue'
const App = shallowRef(AppForm)
const App2 = shallowRef(App2Form)
const App3 = shallowRef(App3Form)
const tabList = [
	{
      name: app,
      value: App,
      key: 'app'
    },
    {
      name: app2,
      value: App2,
      key: 'app2'
    },
    {
      name: app3,
      value: App2,
      key: 'app3'
    },
]
</script>