在 Vue 3 中，若需让所有动态组件（如多标签页中的图表）同时挂载并保持状态，而非仅渲染当前激活项，应避免使用 + 单 component 切换，改用 v-for 遍历 + v-show 控制显隐。

在 vue 3 中，若需让所有动态组件（如多标签页中的图表）同时挂载并保持状态，而非仅渲染当前激活项，应避免使用 `` + 单 `component` 切换，改用 `v-for` 遍历 + `v-show` 控制显隐。

默认情况下，使用 配合 :key 和 仅会挂载当前活跃组件（其余被卸载或缓存但未初始化），导致 onMounted、watch、数据请求等逻辑仅在切换到该 tab 时触发——这正是你遇到“只有最后一个 tab 的组件挂载”的根本原因。

✅ 正确做法是：移除 ，对所有 tab 统一渲染组件实例，仅通过 v-show 控制可见性。这样每个组件在首次 tabs.value 推入时即完成挂载、执行 onMounted、建立响应式监听，并持续保留在 DOM 中（仅 CSS 隐藏），真正实现“全部同时挂载、各自独立运行”。

示例代码如下：

<!-- 模板部分 -->
<div v-for="tab in tabs" :key="tab.id">
  <component :is="tab.component" v-show="activeTabId === tab.id"></component>
</div>

// 逻辑部分（无需改动 addTab）
const addTab = (symbol: string) => {
  const id = nextTabId++;
  tabs.value.push({
    id,
    symbol,
    component: markRaw(ChartComponent), // markRaw 仍需保留，防止解包
  });
  // 注意：此处不再自动设 activeTabId，可按需保留或分离关注点
};

onMounted(() => {
  addTab("USD");
  addTab("EUR");
});

⚠️ 注意事项：

• v-show 依赖 display: none 切换，组件始终存在于 DOM 中，内存占用略高，但响应极快、状态完全保留；
• 若 tab 数量极大（如 >50），需评估性能影响，此时可结合虚拟滚动或懒加载策略；
• markRaw(ChartComponent) 必须保留，否则 defineAsyncComponent 或组合式 API 组件可能被响应式系统代理，导致 :is 绑定异常；
• 不再需要 ，因此也无需手动管理 include/exclude 或生命周期钩子如 onActivated。

总结：Vue 的“条件渲染”（v-if）与“条件显示”（v-show）语义不同。当目标是预挂载 + 独立生命周期 + 实时状态保有时，v-show + v-for 是最直接、可靠且符合 Vue 3 响应式设计哲学的解决方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！