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>