动态组件是Vue中通过<component :is="...">实现同一位置按条件切换组件的机制，需注册组件、绑定合法值，并常配合<keep-alive>缓存状态以避免重复销毁重建。
动态组件是 Vue 提供的一种机制，让你能在同一个位置根据条件实时切换不同的组件，不用写多个 v-if 或重复的模板结构。核心就靠 <component> 标签配合 :is 属性实现。
动态组件怎么用？关键三步
它不是新组件，而是“组件的调度员”。使用时注意三点：
- 在模板中写
<component :is="组件名或组件对象"></component>，这就是占位容器 - 确保目标组件已注册：可以是局部注册（写在
components选项里），也可以是全局注册 -
:is绑定的值必须是字符串（组件名）或直接的组件定义对象；不能是未注册的字符串，否则渲染为空
用 is 实现灵活页面布局的常见方式
不靠硬编码，而是让布局逻辑驱动组件选择：
-
按用户角色切换主界面：比如管理员看到
AdminDashboard，普通用户看到UserPanel，只需改变currentLayout的值 -
响应式布局适配：监听屏幕宽度，自动切换单列
MobileLayout或网格DesktopLayout -
标签页内容区：每个 tab 对应一个组件，点击切换时只更新
:is值，其他区域（如头部、侧边栏）保持不动 -
表单步骤导航：把每一步封装成独立组件（
Step1Form、Step2Review），用:is控制当前显示哪一步
为什么加 keep-alive 很重要？
默认情况下，每次切换 :is，旧组件会被销毁、新组件重新创建——输入框清空、滚动位置丢失、定时器中断。加上 <keep-alive> 就能解决：
- 组件实例被缓存，仅触发
activated/deactivated钩子，不走完整的 created → mounted 流程 - 适合需要保留状态的场景：比如带搜索框的列表页、正在编辑的富文本、播放中的音频组件
- 可配合
include或exclude精确控制哪些组件进缓存，避免内存堆积
一个小提醒：别踩这些坑
实际开发中容易忽略的细节：
-
:is绑定的是字符串时，组件名必须和注册时的 key 完全一致（区分大小写，注意横线命名 vs 驼峰） - 异步组件需用
defineAsyncComponent包裹后再注册，否则:is无法识别 - 如果组件切换后样式错乱，检查是否遗漏了 scoped CSS 或 class 绑定逻辑
- 在
<keep-alive>中，data不会重置，但props更新仍会触发，注意响应式处理
