Vue 3 中用 <component :is> 切换视图，核心是响应式挂载不同组件；支持字符串名或组件对象绑定，推荐后者；需用 <keep-alive> 缓存状态，并注意异步加载与防错处理。
` 切换视图">
Vue 3 中用 `
绑定方式：字符串名 or 组件对象
`:is` 接收两种合法值：
- 已注册的组件名称字符串（如
'UserForm'），适用于全局注册或在components选项中声明的组件 - 组件模块本身（如
import UserForm from './UserForm.vue'后直接赋值），这是 Vue 3 `<script setup>` 中的推荐写法，无需字符串命名，类型安全且 IDE 可跳转</script>
⚠️ 注意：不能在 `:is` 中写三元表达式（如 :is="type === 'edit' ? EditComp : ViewComp"），应提前计算好再绑定，否则响应式可能失效。
保持状态：必须套 ``
默认情况下，每次切换都会销毁旧组件、新建新组件，输入框内容、滚动位置、定时器等全丢失。解决方法很简单：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 在外层加 `
` 标签，组件实例就会被缓存，仅触发 `activated` / `deactivated` 钩子 - 被缓存的组件需有明确的
name（可通过defineOptions({ name: 'UserProfile' })或组件文件名自动推导） - 可用
include或exclude精确控制哪些组件参与缓存，比如：<keep-alive :include="['FormTab', 'DetailTab']>
配合异步加载提升性能
对体积大的模块，推荐结合 `defineAsyncComponent` 懒加载：
- 写法示例：
const ReportView = defineAsyncComponent(() => import('./ReportView.vue')) - 赋值给响应式变量后，`
` 会自动触发加载，并在首次渲染后缓存结果 - SSR 场景下注意：所有可能用到的异步组件需确保服务端也能同步引入，否则 hydration 会出错
防错处理：避免白屏和调试困难
`:is` 值为 `null`、`undefined` 或未注册组件时，Vue 不报错，只渲染空白——这容易掩盖问题：
- 建议在 computed 中做兜底，例如：
actualComp: () => this.tabs[this.activeKey] || 'EmptyPlaceholder' - 开发阶段可在控制台打印当前 `:is` 值，确认是否拼写错误（比如大小写、kebab-case 写成 PascalCase）
- 若使用 TypeScript，搭配组件类型断言（如
ComponentPublicInstance）能进一步减少运行时错误
