Tab 切一下，接口调两次？记一次 Vue KeepAlive 引发的"鬼打墙"排查实录

上午 10 点，研发群的告警打破了宁静：“为什么切换 Tab 菜单时，后端接口会瞬间触发两次请求？用户反馈页面加载出现了明显的卡顿感！”

我迅速打开 Chrome DevTools，在 Network 面板中，那两条如影随形的 API 请求清晰可见。这并非简单的逻辑重叠，而是一次典型的 Vue 生命周期钩子与组件缓存机制（KeepAlive）深度耦合引发的"竞态幻象"。

以下是针对这一“鬼打墙”Bug 的侦探式排查与根治实录。

场景还原：首页包含“门票（Ticket）”与“周边（Life）”两个核心 Tab。 初始方案采用了 Vue 的动态组件配合 `KeepAlive` 进行视图缓存：

<!-- 父组件容器 -->
<KeepAlive>
  <component :is="activeTab === 'ticket' ? Ticket : Life" />
</KeepAlive>

技术直觉：既然包裹了 `KeepAlive`，组件实例理应被缓存，且 `onMounted` 钩子仅在初次加载时触发。然而，实际观测结果却是：每次 Tab 切换，目标组件的生命周期都会被"重置"。

通过对 Vue 渲染器源码的深度追踪，真相逐渐浮出水面：

1. 动态组件的本质：当 `<component :is="..." />` 在 A 与 B 组件间切换时，Vue 默认认为执行"销毁旧实例 -> 挂载新实例"的全量转换过程。

2. 缓存失效的诱因：`KeepAlive` 缓存的是同一个组件定义的实例（Instance）。但在我们的场景中，切换动作触发了不同组件类型的交替，导致系统判定为"业务重置"。

3. 副作用叠加：我们在子组件的 `onMounted` 中封装了数据初始化逻辑。由于切换导致了高频的 Unmount/Mount，逻辑被机械性地重复执行。

核心结论：盲目使用 `KeepAlive` 配合不同类型的动态组件，非但没有减少开销，反而因复杂的状态对比机制引入了额外的性能损耗（Overhead）。

为了根治这一顽疾，我们重构了视图切换逻辑，确立了"视图静默展示，逻辑精准刷新"原则。

1. 父组件：控制权上移，引入“业务遥控器”

摒弃动态组件，改用 `v-show` 维持组件的长连接挂载。

<!-- index.vue -->
<script setup>
const refreshKey = ref(0); // 业务状态的“逻辑指纹”
const homeStore = useHomeStore();

// 监听领域数据的变化（如：切换了目标城市）
watch(() => homeStore.getSocialRegionId(), (newId, oldId) => {
  if (newId && oldId && newId !== oldId) {
    // 只有当业务维度真正发生变更时，才通知子组件：你需要“逻辑重生”
    refreshKey.value++;
  }
});
</script>

<template>
  <!-- v-show 确保 Tab 切换仅为 CSS 变更，0 生命周期开销 -->
  <Ticket v-show="activeTab === 'ticket'" :key="`ticket-${refreshKey}`" />
  <Life v-show="activeTab === 'life'" :key="`life-${refreshKey}`" />
</template>

2. 子组件：职责解耦，回归“纯粹渲染”

- 逻辑剥离：移除 `onMounted` 中冗余的接口拉取逻辑。 - 依赖反转：子组件不再主动监听全局 Store。只有当父组件通过 `key` 强制其销毁重建时，才会触发完整的初始化链路。

1. KeepAlive 不是万能胶 它最契合的场景是“列表页 <-> 详情页”这种深层链路的缓存。对于同级高频切换的 Tab，`v-show` 配合合理的按需渲染组件通常更具可控性。

2. 区分"挂载"与"活跃" `onMounted` 代表物理存在的开始，`onActivated`（KeepAlive 专属）代表视觉可见的开始。分不清二者的差异，是引发接口重复调用的重灾区。

3. 父指挥，子执行 避免在子组件内散落过多的全局监听逻辑。通过 `props` 传参或 `key` 强制刷新，让数据流向具备单向的、可预测的链路。

结语

前端工程的深度，往往藏在这些看似不起眼的重复请求中。通过对 Vue 渲染机制的精准拆解，我们将接口负载降低了 50%，首屏操作流畅度提升了 30%。读懂框架的"脾气"，比死记硬背 API 更有工程价值。