vue动态组件核心是标签配合:is属性实现状态驱动视图切换，支持按钮、标签页、多步骤表单等场景，并可通过缓存组件状态避免重复创建。
Vue 动态组件的核心是用 <component></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变量即可
避免重复创建：用 缓存状态
默认情况下，每次切换组件都会销毁旧实例、创建新实例，导致输入内容丢失、接口重新请求等问题。
- 把
<component></component>包在<keep-alive></keep-alive>内 - 被缓存的组件只触发一次
mounted，再次激活时走activated钩子 - 注意：组件需有明确的
name（在组件选项中定义），否则<keep-alive></keep-alive>无法正确缓存
替代方案对比：v-if vs 动态组件
两者都能实现条件渲染，但适用场景不同：
-
v-if/v-else：适合只有两三个固定分支、逻辑简单的情况，写法直接 -
<component :is></component>：适合分支较多、组件名来自数组/配置、需要统一管理生命周期的场景 - 如果只是开关一个组件，用
v-if更轻量；如果涉及多个可插拔模块，动态组件更清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
