动态组件

一、App.vue

<template>
  <ul> <!-- 使用ul标签替代了错误的url标签，用于展示列表 -->
    <li v-for='(item, index) in tabList' :key='index' @click="() => { currentComponent.com = tabList[index].com }">
      <!-- 使用v-for指令遍历tabList数组，生成列表项，其中item是当前遍历的元素，index是索引 -->
      {{ item.name }} <!-- 使用双大括号插值表达式展示item的name属性 -->
    </li>
  </ul>
  <component :is="currentComponent.com"></component>
  <!-- :is 是一个特殊的属性，用于动态地绑定一个组件到其标签名。根据currentComponent.com的值来决定具体渲染哪个组件 -->
</template>

<script setup lang="ts">
import { reactive } from 'vue'; // 引入vue的reactive API，用于创建响应式对象
import A from './components/A.vue'; // 引入A组件
import B from './components/B.vue'; // 引入B组件
import C from './components/C.vue'; // 引入C组件
import { DefineComponent } from 'vue'; // 引入DefineComponent类型，用于更精确地定义组件类型

interface TabItem { // 定义TabItem接口，用于约定tabList中对象的结构
  name: string; // name属性是字符串类型
  com: DefineComponent<any, any, any>; // com属性是一个组件类型，这里使用any是为了简化，实际使用时需要具体定义组件的props、emits等类型
}

let tabList = reactive<TabItem[]>([ // 创建响应式对象tabList，它的类型是TabItem数组
  { name: 'A准备好面试题', com: A }, // 数组的第一个元素，name是字符串，com是A组件
  { name: 'B准备简历', com: B }, // 数组的第二个元素，name是字符串，com是B组件
  { name: 'C准备面试', com: C } // 数组的第三个元素，name是字符串，com是C组件
]);

let currentComponent = reactive<any>({ com: tabList[0].com }); // 创建响应式对象currentComponent，它的类型是any，初始时com属性指向tabList的第一个元素的com属性，即A组件
</script>

二、components

A.vue:

<!--子组件: A 组件-->

<template>
    <div>
        <h1>A组件</h1>
    </div>
</template>

B.vue:

<!--子组件: B 组件-->

<template>
    <div>
        <h1>B组件</h1>
    </div>
</template>　

C.vue:

<!--子组件: C 组件-->

<template>
    <div>
        <h1>C组件</h1>
    </div>
</template>

三、运行结果

四、console有报错

报错解释如下：

这个报错信息与 Vue 3 的响应式系统有关。在 Vue 3 中，使用了 reactive 和 ref 等 API 来创建响应式对象或值，以便在它们发生变化时能够自动更新相关的组件。
然而，在某些情况下，我们可能不希望某些对象或组件被转化为响应式的。在这种情况下，可以使用 markRaw 或者在创建引用时使用 shallowRef，以减少不必要的性能开销。
报错信息告诉我们，一个组件被转化成了响应式对象，这可能会导致性能上的不必要开销。它建议我们使用 markRaw 或者 shallowRef 来避免这种情况。
具体来说：
　　markRaw：此函数可以标记一个对象，使其不会被转化为响应式的。这意味着该对象的任何变化都不会触发组件的更新。
　　shallowRef：这是一种创建引用的方式，与 ref 不同，它创建的引用只会在其直接引用的值发生变化时触发更新，而不会深入到引用的内部去检测其属性的变化。
在你的情况下，如果 A.vue 组件不应该被转化为响应式的，你可以尝试使用 markRaw 来标记它。如果 A.vue 组件需要被转化为响应式的，但其内部某些属性不需要被响应式，你可以尝试使用 shallowRef 来创建这些属性的引用。