一、最核心、最高频的 3 大原因（你的项目全中）

1. 异步请求竞态（旧接口后返回，覆盖新数据）

• 现象：快速切换路由、快速点击查询 → 发了多个请求
• 原理：旧请求慢、新请求快，旧请求最后返回，把新数据覆盖掉
• 你的场景：路由切换 → 连续调用 getList () → 数据错乱

2. 组件复用，没有真正销毁

• Vue 路由切换时，公用组件不会销毁，只会走 watch
• data 里的数据、表格选中、搜索条件全部保留在上一次状态
• 新页面渲染 → 直接用了旧数据

3. el-table DOM 缓存 + 列条件渲染错乱

• Element 表格为了性能会复用 DOM
• 你用 v-if 控制列显示隐藏 → DOM 结构对不上 → 数据错位、显示旧列

二、搜索 / 查询相关导致显示旧数据

4. 搜索条件没有清空

• 路由切换时 searchForm 没有重置
• 新页面带着上一页的查询条件 → 查到旧数据

5. 分页页码没有重置

• 上一页停在第 3 页，切换新路由依然是第 3 页 → 数据对不上

6. 多次触发查询（重复调用 getList）

• created + watch + mounted 同时触发
• 父组件、子组件同时触发查询
• 导致连续发请求，最终被旧数据覆盖

三、状态管理 / 缓存导致的旧数据

7. Vuex 状态没有重置

• 列表数据、加载状态存在 vuex
• 路由切换没有清空 → 新页面直接展示上一页缓存

8. 表格选中状态 / 序号残留

• 切换路由没有执行 clearSelection()
• 复选框残留、高亮残留，看起来像旧数据

四、DOM / 渲染层面导致 “看起来是旧数据”

9. 表格没有 key，DOM 复用错乱

• 不绑定 :key="curRouter"
• 新数据渲染到老 DOM 上 → 列错位、字段对应错误

10. 异步赋值时机不对（$nextTick 缺失）

• DOM 更新比数据慢 → 视图展示上一次的值
• 看起来像 “数据没刷新”

五、接口 / 后端层面

11. 接口入参没有覆盖

• 上一页参数残留在对象里
• 新请求没有正确覆盖 → 查回旧数据

12. 接口缓存（强缓存 / 协商缓存）

• GET 请求被浏览器缓存 → 返回旧数据

最精简总结（你可以直接复制发架构师）

列表显示旧数据，本质就 4 类问题：

1. 请求竞态：旧接口后返回，覆盖新数据（最常见）
2. 组件复用：组件没销毁，数据没重置
3. 状态残留：搜索条件、分页、选中项没清空
4. 表格缓存：el-table DOM 复用，列错乱导致视觉旧数据

对应 4 行终极解决方案

1. 加请求 ID：丢弃旧请求响应
2. 路由切换清空数据：searchForm、list、pageNo
3. 表格加 key：:key="curRouter" 强制重建
4. 清空选中：clearSelection()

https://www.doubao.com/thread/w1c5433bf2693279c