Vue使用计算属性排序数组触发vue/no-side-effects-in-computed-properties错误如何解决

vue/no-side-effects-in-computed-properties 是Vue官方ESLint规则抛出的校验错误，规则要求：计算属性仅可基于现有响应式状态做值的计算返回，不允许修改原始响应式数据、产生额外副作用。

你代码中触发错误的核心原因是：JavaScript原生的Array.sort()是原地排序方法，直接调用this.items.sort()会直接修改data中定义的原始items数组，属于在计算属性中修改响应式状态的副作用行为，违反了规则要求。

Codepen运行无报错是因为平台默认未开启该ESLint规则校验，属于代码规范层面的提醒，不是代码运行时的语法错误，但长期不修复可能会出现原始数据非预期变更的隐藏bug。

仅需要在排序前对原始数组做浅拷贝，避免直接修改原数组即可，将计算属性中排序的代码修改为以下任意一种即可：

方案1：使用扩展运算符拷贝 #

// 先拷贝原数组，再对拷贝后的新数组排序
const sortedArray = [...this.items].sort((a, b) => {
  if (a[this.sortKey] < b[this.sortKey]) return -1
  if (a[this.sortKey] > b[this.sortKey]) return 1
  return 0
});

方案2：使用slice()方法拷贝 #

// slice()无参数调用时会返回原数组的浅拷贝副本
const sortedArray = this.items.slice().sort((a, b) => {
  if (a[this.sortKey] < b[this.sortKey]) return -1
  if (a[this.sortKey] > b[this.sortKey]) return 1
  return 0
});

修改后不会影响排序和过滤的逻辑，同时符合计算属性的设计规范，ESLint报错就会消失。

内容的提问来源于stack exchange，提问作者user17525310