Vue动态组件核心是<component>标签配合:is属性实现状态驱动视图切换，支持按钮、标签页、多步骤表单等场景，并可通过<keep-alive>缓存组件状态避免重复创建。

Vue 动态组件的核心是用 <component> 标签配合 :is 属性，根据数据动态决定渲染哪个组件，而不是写死在模板里。

基础用法：用 :is 绑定组件名

把要切换的组件注册好，再用一个响应式变量控制 is 的值：

• 在 components 选项中注册组件（局部）或全局注册
• 定义 data 中的变量（如 currentTab），值为组件名字符串（如 'TabHome'）
• 模板中写 <component :is="currentTab"></component>
• 通过点击按钮、改变路由、响应用户选择等方式更新这个变量，Vue 自动切换组件

常见切换方式：按钮、标签页、表单步骤

这类场景本质都是“状态驱动视图”，比如多标签页：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 用 v-for 渲染一组 tab 按钮，每个按钮绑定 @click="currentTab = 'TabX'"
• 对应组件内部可包含表单、列表、编辑器等，互不影响
• 多步骤表单中，每步对应一个组件，nextStep() 方法只需更新 currentStep 变量即可

避免重复创建：用 <keep-alive> 缓存状态

默认情况下，每次切换组件都会销毁旧实例、创建新实例，导致输入内容丢失、接口重新请求等问题。

立即学习“前端免费学习笔记（深入）”；

• 把 <component> 包在 <keep-alive></keep-alive> 内
• 被缓存的组件只触发一次 mounted，再次激活时走 activated 钩子
• 注意：组件需有明确的 name（在组件选项中定义），否则 <keep-alive> 无法正确缓存

替代方案对比：v-if vs 动态组件

两者都能实现条件渲染，但适用场景不同：

• v-if/v-else：适合只有两三个固定分支、逻辑简单的情况，写法直接
• <component :is>：适合分支较多、组件名来自数组/配置、需要统一管理生命周期的场景
• 如果只是开关一个组件，用 v-if 更轻量；如果涉及多个可插拔模块，动态组件更清晰