Vue应用中排序计算属性数组时修改原数组的问题

数据老陈

2026-8-3

问题分析与解决

问题出在数组是引用类型：你在bestResults里直接将this.allResults赋值给orderedArray，随后调用sort会直接修改原数组（也就是store中的allResults），导致recentResults拿到的是已经被按分数排序后的数组，自然无法按日期展示最新结果。

解决代码

修改`bestResults`方法（避免修改原数组）

bestResults() {
  // 用展开运算符复制原数组，不对store里的原始数据造成影响
  const orderedArray = [...this.allResults];
  // 简化排序逻辑，直接用b.score - a.score实现分数从高到低排序
  orderedArray.sort((a, b) => b.score - a.score);
  const half = Math.round(orderedArray.length / 2);
  return orderedArray.slice(0, half);
}

优化`recentResults`方法（确保按日期展示最新结果）

如果后端返回的allResults已经按创建时间倒序排列（最新结果在数组头部），直接取前5即可；如果后端未做排序，需要先按日期倒序再截取：

recentResults() {
  // 复制原数组后，按日期字段倒序排序（假设结果中的日期字段为`createTime`，支持Date对象转换）
  const sortedRecent = [...this.allResults].sort((a, b) => new Date(b.createTime) - new Date(a.createTime));
  return sortedRecent.slice(0, 5);
}