Vue.js 动态组件 “ 的应用逻辑

Vue 的 <component :is=”…”> 本质是用容器按需渲染任意组件，核心在于解耦渲染逻辑与组件定义，通过变量控制“渲染谁”，支持导入组件对象、局部/全局注册名、原生标签四种引用类型。

<img src="https://img.php.cn/upload/article/001/242/473/178450632134356.jpg" alt="vue.js 动态组件 “ 的应用逻辑”>

Vue 的 <component :is="..."> 本质是“用一个容器，按需渲染任意组件”，核心不在切换动画或 UI 效果，而在于解耦渲染逻辑与组件定义——把“渲染谁”这个决策交给变量控制，而不是硬编码多个 v-if 块。

组件切换靠 is 绑定值驱动

:is 接收的不是字符串模板，而是可解析为组件的“引用”。它支持四种类型：

• 已导入的组件对象（最推荐）：如 import Home from './Home.vue'，然后 :is="Home" —— 类型安全、IDE 可跳转、无注册开销
• 局部注册的组件名（字符串）：需先在 components: { MyComp } 中声明，再用 :is="'MyComp'"
• 全局注册组件名（字符串）：如 Element Plus 的 'el-input' 或自定义全局组件
• 原生 HTML 标签名：如 :is="'p'"、:is="'input'"，可配合属性直接使用

Tab 或步骤式场景适合集中管理映射关系

当有多个 Tab 或多步表单时，不建议写一堆 v-if，而是用对象做组件映射：

• 定义 const tabMap = { home: Home, profile: Profile, settings: Settings }
• 用 shallowRef 或 ref 存当前 key（如 activeTab = ref('home')）
• 模板中写 <component :is="tabMap[activeTab]" />，点击按钮只改 key，自动触发渲染
• 这样增删 Tab 只需改映射对象，逻辑清晰、易维护

状态保留要用 <keep-alive> 包裹

默认情况下，每次切换组件都会销毁旧实例、创建新实例，表单输入、滚动位置、定时器等都会丢失。要保持状态：

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

• 在外层加 <keep-alive><component :is="..." /></keep-alive>
• 组件内会触发 activated 和 deactivated 生命周期钩子
• 注意：<keep-alive> 只对内部组件生效，且被缓存的组件不能用 setup 中的 onBeforeUnmount 清理资源（应改用 onDeactivated）

异步加载组件可直接传 defineAsyncComponent

不需要提前 import，也不用注册，直接在 :is 中调用：

• :is="defineAsyncComponent(() => import('./views/UserList.vue'))"
• 支持带 loading、error 状态的封装，比如配合 Suspense 使用
• 适合路由级或功能模块级的按需加载，避免首屏打包过大