在 Vue 3 中，若需让多个动态组件同时挂载（而非仅激活项渲染），应避免使用 配合单 component 切换，改用 v-for + v-show 实现 DOM 复用与实例常驻。

在 vue 3 中，若需让多个动态组件同时挂载（而非仅激活项渲染），应避免使用 `` 配合单 `component` 切换，改用 `v-for` + `v-show` 实现 dom 复用与实例常驻。

默认情况下， 结合 :key 和 仅会挂载当前激活的组件实例，其余被缓存或卸载——这虽利于性能，但不满足“所有 Tab 组件需一次性挂载并保持运行状态”的需求（例如多个实时图表需独立订阅数据流、响应式更新或内部定时器）。

正确做法是：放弃单组件切换逻辑，改为遍历所有 Tab 并统一渲染，通过 v-show 控制显隐。这样每个组件都会在首次渲染时完成 onMounted、创建响应式状态、启动副作用，并持续保留在 DOM 中（仅 CSS 隐藏），真正实现“全部挂载、按需显示”。

<!-- ✅ 正确：所有组件均挂载，仅通过 display: none 切换可见性 -->
<div v-for="tab in tabs" :key="tab.id">
  <component 
    :is="tab.component" 
    v-show="activeTabId === tab.id"
  />
</div>

⚠️ 注意事项：

• 无需 markRaw（除非组件本身是响应式代理对象）：ChartComponent 是标准 SFC 或函数式组件时，直接赋值即可；markRaw 仅在你将响应式对象（如 reactive({})）误当作组件传入时才需使用。
• 避免内存泄漏：若组件内含定时器、事件监听器或 WebSocket 连接，请确保在 onBeforeUnmount 中清理，否则 v-show 不触发卸载，资源将持续占用。
• 性能权衡：当 Tab 数量极多（如 >50）且组件开销大时，可结合 IntersectionObserver 或虚拟滚动做懒加载优化，但绝大多数仪表盘场景下，10–20 个图表组件使用 v-show 完全可接受。
• 状态隔离：每个组件实例完全独立，props、emits、内部 ref 均不共享，天然支持多实例状态管理。

总结：v-show + v-for 是 Vue 3 中实现动态组件“全量挂载、条件显示”的标准解法；它语义清晰、行为可预测，且规避了 的缓存生命周期复杂性，是构建多标签实时可视化界面的推荐实践。

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