动态组件

@Dynamic

Overview

使用 <component> 元素和特殊的 :is 属性实现多组件选一：在两个或多个组件间来回切换，如标签页、导航页

被切换掉的组件会被卸载。通过 <KeepAlive> 组件强制被切换掉的组件仍然保持“存活”的状态

[] 利用条件 v-if 渲染切换2个组件

import Work from './components/Work.vue';
import Team from './components/Team.vue';

<component v-if="flag" :is="Work"></component>
<component v-else :is="Team"></component>

改进 - 使用一个 <component>

为了避免性能上的消耗，使用浅响应 shallowRef 创建组件数组

浅响应 shallowRef 创建一个浅响应式对象，数据的深层改变不会触发视图更新，减少性能上的消耗；并不对其中的数据进行响应，仅仅对对象的名字响应

let ind = ref(0)
// let com = ref([Reco, Copyright])
let com = shallowRef([Reco, Copyright])

<component :is="com[ind]"></component>