在 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 隐藏），真正实现“全部同时挂载、各自独立运行”。
示例代码如下：
⚠️ 注意事项：
立即学习
“
前端免费学习笔记（深入）
”；
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 响应式设计哲学的解决方案。
// 逻辑部分（无需改动 addTab）
const addTab = (symbol: string) => {
const id = nextTabId++;
tabs.value.push({
id,
symbol,
component: markRaw(ChartComponent), // markRaw 仍需保留，防止解包
});
// 注意：此处不再自动设 activeTabId，可按需保留或分离关注点
};
onMounted(() => {
addTab("USD");
addTab("EUR");
});