Vue 一个页面中使用多个同类组件出现“串数据“现象？一个 key 就能解决

摘要

Vue同页面用v-if切换多个同类组件时，因Diff算法复用实例易导致状态残留、数据错乱。解决方法是给组件加唯一key强制销毁重建，或改用v-show避免复用。这是前端开发中防止组件"串数据"的通用最佳实践。

[一. 问题场景](#一. 问题场景)

[二. 根本原因：Vue 的 Diff 算法与组件复用](#二. 根本原因：Vue 的 Diff 算法与组件复用)

[1. Vue 的 Diff 策略](#1. Vue 的 Diff 策略)

[2. 问题是怎么产生的](#2. 问题是怎么产生的)

[3. 一张图看懂](#3. 一张图看懂)

[三. 解决方案：加 key 强制区分](#三. 解决方案：加 key 强制区分)

[1. 核心写法](#1. 核心写法)

[2. 为什么有效](#2. 为什么有效)

[3. key 应该加在哪一层？](#3. key 应该加在哪一层？)

[四. 延伸：同类问题的常见场景](#四. 延伸：同类问题的常见场景)

[1. v-for 中不加 key](#1. v-for 中不加 key)

[2. 路由复用（同组件不同参数）](#2. 路由复用（同组件不同参数）)

[3. v-if 切换相同类型的表单组件](#3. v-if 切换相同类型的表单组件)

[4. 动态组件](#4. 动态组件)

[五. v-if / v-show：不同的策略选择](#五. v-if / v-show：不同的策略选择)

总结

一. 问题场景

在实际开发中，我们经常会在同一个页面 中放置两个甚至多个相同类型的组件 ，通过 v-if 切换显示。例如：

html 复制代码

<!-- table1 -->
<div v-if="todoType == '1'">
  <vxe-table :data="tableA" :columns="columnsA" />
</div>

<!-- table2 -->
<div v-if="todoType == '2'">
  <vxe-table :data="tableB" :columns="columnsB" />
</div>

看起来很正常，但实际运行后你会发现：

切换 table 后，表格列宽、排序状态、选中行等残留了上一个表格的状态
表头字段"串了"，A 表的列跑到了 B 表(博主就是出现的这种问题)
分页、滚动位置等内部状态没有重置
某些情况下甚至出现渲染错乱、数据不对应

注意：这不是 vxe-table这个组件的 Bug ，而是 Vue 虚拟 DOM Diff 算法导致的组件复用问题。

二. 根本原因：Vue 的 Diff 算法与组件复用

1. Vue 的 Diff 策略

Vue 在更新虚拟 DOM 时，遵循一个核心原则：

同类型组件 + 相同位置 = 复用已有实例，而非销毁重建。

当 Vue 发现前后两个 VNode 是相同标签/组件类型 时，它不会销毁旧组件再创建新组件，而是在原有实例上做 patch（打补丁）更新。

2. 问题是怎么产生的

以上面的代码为例，当 todoType 从 '1' 切换到 '2' 时：

html 复制代码

切换前：
├── div (v-if=true)   → 渲染了 vxe-table
└── div (v-if=false)  → 未渲染

切换后：
├── div (v-if=false)  → ⚠️ 不销毁！被 patch 为注释节点（但内部组件状态可能残留）
└── div (v-if=true)   → ⚠️ 不创建新实例！复用了上面的 div 和 vxe-table 实例
                         仅更新 props，内部缓存状态未重置 → 导致"串数据"

如果这两个 <vxe-table> 在 DOM 树中的相对位置相同 且没有 key 区分，Vue 的 Diff 算法可能认为它们是"同一个组件"，于是：

不销毁旧的 table 实例
直接在旧实例上更新 props
但组件内部的缓存状态（列配置、滚动位置、选中行等）没有被重置

这就导致了所谓的 "串数据" 现象。

3. 一张图看懂

html 复制代码

①没加 key 的情况：

切换前                    切换后
┌──────────────┐         ┌──────────────┐
│ vxe-table    │         │ vxe-table    │  ← 还是原来那个实例
│ (实例A)      │ ──────► │ (实例A)      │
│ A表数据      │  仅换   │ B表数据      │
└──────────────┘  数据   └──────────────┘
                   ⚠️ 内部状态残留 → 串数据

②加了 key 的情况：
切换前                    切换后
┌──────────────┐         ┌──────────────┐
│ vxe-table    │         │ vxe-table    │  ← 全新的实例
│ key="A"      │ ──────► │ key="B"      │
│ (实例A)      │  销毁+  │ (实例B)      │
└──────────────┘  新建   └──────────────┘
                   ✅ 状态干净 → 正常显示

三. 解决方案：加 `key` 强制区分

1. 核心写法

给每个组件实例加上不同的 key，告诉 Vue："这是两个完全不同的组件，不要复用，而是要删除旧组件，创建新组建。"

html 复制代码

<!-- table1 -->
<div v-if="todoType === '1'" key="panel-1">
  <vxe-table
    key="table-1"
    :data="tableData"
    ...
  />
</div>

<!-- table2 -->
<div v-if="todoType === '2'" key="panel-2">
  <vxe-table
    key="table-2"
    :data="ratingTableData"
    ...
  />
</div>

2. 为什么有效

当 key 不同时，Vue 的 Diff 算法会判定：

"这两个 VNode 虽然类型相同，但 key 不同，所以是不同的组件实例。"

于是 Vue 会：

销毁旧组件实例（触发 beforeDestroy / destroyed）
创建全新的组件实例（触发 beforeCreate → mounted）
所有内部状态从零开始，不会残留

3. key 应该加在哪一层？

加 key 的位置	效果	推荐度
外层 `<div>`	整个容器连同子组件一起销毁重建	⭐⭐⭐ 推荐
`<vxe-table>` 上	仅表格组件销毁重建，外层容器保留	⭐⭐ 可以
两层都加	双重保险，最彻底	⭐⭐⭐⭐ 最佳实践

上面的代码在外层 <div> 和内层 <vxe-table> 上都加了 key，这是最稳妥的做法。

四. 延伸：同类问题的常见场景

1. `v-for` 中不加 key

这是最经典的场景。列表渲染时不加 key 或使用 index 作为 key，会导致：

删除中间项时，后续项的组件状态错位
输入框内容"跑偏"到错误的行

html 复制代码

<!-- ❌ 错误：用 index 当 key -->
<my-input v-for="(item, index) in list" :key="index" />

<!-- ✅ 正确：用唯一标识当 key -->
<my-input v-for="item in list" :key="item.id" />

2. 路由复用（同组件不同参数）

从 /user/1 导航到 /user/2，如果路由对应的组件相同，Vue Router 会复用组件实例 ，不会重新触发 created / mounted。

html 复制代码

// ✅ 解决方案：监听路由参数变化
watch: {
  '$route.params.id'(newId) {
    this.fetchData(newId)
  }
}

// ✅ 或者在 <router-view> 上加 key
<router-view :key="$route.fullPath" />

3. `v-if` 切换相同类型的表单组件

html 复制代码

<!-- 两个 el-select 切换时，可能出现下拉框残留、选中值错乱 -->
<el-select v-if="type === 'A'" key="select-a" v-model="valueA" />
<el-select v-if="type === 'B'" key="select-b" v-model="valueB" />

4. 动态组件 `<component :is="...">`

html 复制代码

<!-- 不加 key，切换组件时可能复用实例 -->
<component :is="currentComponent" :key="currentComponent" />

五. `v-if` / `v-show`：不同的策略选择

对比项	`v-if`+`key`	`v-show`
切换时	销毁 + 重建	隐藏 + 显示
内部状态	每次重置	保留
性能开销	切换开销大	初始渲染开销大
适用场景	切换频率低、需要干净状态	切换频率高、需要保留状态

如果你的两个表格切换频繁且数据量大，可以考虑用 v-show 替代 v-if，这样两个表格始终存在，各自独立，也就不存在复用问题了。

html 复制代码

<div v-show="todoType === '1'">
  <vxe-table :data="tableData" />
</div>
<div v-show="todoType === '2'">
  <vxe-table :data="ratingTableData" />
</div>

看来如果我们觉得采用"v-if + key"的方案太麻烦，那就直接使用v-show即可！这种简单高效.

总结

要点	说明
问题本质	Vue Diff 算法对同类型组件进行复用，导致内部状态残留
核心方案	加不同的 `key`，强制 Vue 视为不同实例
最佳实践	外层容器 + 组件本身都加 `key`，双重保险
替代方案	高频切换场景可用 `v-show` 避免销毁重建
通用原则	凡是同页面出现多个相同组件的地方，都应该用 `key` 显式区分

一句话总结：

同一个页面里放了多个同类组件？别犹豫，给它们各自一个唯一的 key，这是成本最低、效果最好的防"串"手段。

Vue 一个页面中使用多个同类组件出现“串数据“现象？一个 key 就能解决

一. 问题场景

二. 根本原因：Vue 的 Diff 算法与组件复用

1. Vue 的 Diff 策略

2. 问题是怎么产生的

3. 一张图看懂

三. 解决方案：加 key 强制区分

1. 核心写法

2. 为什么有效

3. key 应该加在哪一层？

四. 延伸：同类问题的常见场景

1. v-for 中不加 key

2. 路由复用（同组件不同参数）

3. v-if 切换相同类型的表单组件

4. 动态组件 <component :is="...">

五. v-if / v-show：不同的策略选择

总结

三. 解决方案：加 `key` 强制区分

1. `v-for` 中不加 key

3. `v-if` 切换相同类型的表单组件

4. 动态组件 `<component :is="...">`

五. `v-if` / `v-show`：不同的策略选择