26. 动态组件

场景：Tab 切换

假设你有一个 tab 界面，点击不同 tab 显示不同组件。写 if-else 太啰嗦：

<A v-if="tab === 'A'" />
<B v-if="tab === 'B'" />
<C v-if="tab === 'C'" />

Vue 提供了更优雅的方式：

<component :is="currentComponent" />

:is 的值可以是：

• 已注册组件的名字（字符串）
• 直接 import 进来的组件对象

基本用法

<script setup>
import TabA from './TabA.vue'
import TabB from './TabB.vue'
import TabC from './TabC.vue'

const currentTab = ref('TabA')
const tabs = { TabA, TabB, TabC }
</script>

<template>
  <button @click="currentTab = 'TabA'">A</button>
  <button @click="currentTab = 'TabB'">B</button>
  <button @click="currentTab = 'TabC'">C</button>

  <component :is="tabs[currentTab]" />
</template>

点击按钮切换 currentTab，<component :is> 就自动渲染对应的组件。

切换时状态会丢失

动态组件有个重要特点：被切换走的组件会被销毁。切换回来时是一个全新的实例，之前的状态全丢了。

比如 TabA 里有个输入框，用户输入了文字，切到 B 再切回来——输入框是空的。

这不一定是我们想要的。

KeepAlive 保持状态

用 <KeepAlive> 包裹动态组件，切换出去的组件不会被销毁，而是缓存起来：

<KeepAlive>
  <component :is="tabs[currentTab]" />
</KeepAlive>

切回来时，组件状态完整保留。

KeepAlive 组件本身不渲染任何 DOM，它只是一个”容器”。

KeepAlive 的两个生命周期

被 KeepAlive 包裹的组件多了两个生命周期钩子：

• onActivated()——组件被激活（显示）时调用
• onDeactivated()——组件被停用（隐藏）时调用

这对”恢复播放”、“重新请求数据”这类场景很有用。

使用场景

场景	用动态组件	用 KeepAlive
Tab 切换	是	推荐
步骤条/向导	是	不推荐（每步状态可能不需要保留）
条件显示	可选	视情况
多形态弹窗	是	推荐

本节回顾

• <component :is="name"> 动态切换组件
• :is 可以是组件名或组件对象
• 切换出去的组件默认被销毁
• <KeepAlive> 缓存组件状态
• KeepAlive 组件增加 onActivated / onDeactivated 钩子