vue 3 动态组件切换核心是 标签配合 is 属性，其值取决于注册方式：局部注册时 is 绑定组件引用，全局注册时可传字符串名；混合使用推荐统一用引用+映射表提升类型安全；搭配 可缓存状态。
Vue 3 中通过动态组件切换不同视图，核心在于 <component></component> 标签配合 is 属性，而能否正确切换，直接取决于组件是否已被正确注册——注册方式决定了 is 属性该传什么值。
局部注册时：is 绑定组件本身（不是字符串）
在 <script setup></script> 中使用局部导入的组件，is 必须绑定组件的引用对象，不能写成字符串名，否则不渲染：
- ✅ 正确写法：
import Home from './views/Home.vue'; const current = ref(Home)→<component :is="current"></component> - ❌ 错误写法：
current.value = 'Home'（没注册为全局，字符串无效） - 多个视图可统一用 ref 管理，点击按钮切换值即可，无需 v-if 堆砌
全局注册时：is 绑定组件名称字符串
若在 main.js 中通过 app.component('MyView', MyView) 全局注册，模板中就可用字符串：
- ✅
<component :is="activeView"></component>，其中activeView = ref('MyView') - ✅ 支持直接写死：
<component is="MyView"></component> - 注意大小写和连字符：注册名为
'user-profile'，则is也必须是'user-profile'
混合注册 + 类型安全建议
大型项目常混合使用：基础组件全局注册，业务视图局部导入。此时推荐统一用组件引用方式，避免字符串硬编码：
- 定义视图映射表：
const views = { home: Home, about: About, profile: UserProfile } - 切换时：
current.value = views[route.name]（配合路由）或views[key]（配合 tab name） - TypeScript 下能获得完整类型提示，减少运行时错误
搭配 keep-alive 保留状态
切换视图时若需保留输入、滚动等状态，把 <component></component> 包在 <keep-alive></keep-alive> 内：
<keep-alive><component :is="current"></component></keep-alive>- 支持 include/exclude 属性精准控制缓存范围，比如
include="Home,About" - 被缓存的组件会触发
activated/deactivated生命周期钩子
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
