Vue computed属性出现Unexpected side effect报错，寻求排查解决方案

这个问题的核心原因很明确：你在computed里使用的Array.sort()是原地排序方法，它会直接修改原数组this.myRepos——而Vue的computed属性要求是纯函数，不能修改组件的响应式状态，只能基于现有状态返回新的计算值，所以触发了ESLint的vue/no-side-effects-in-computed-properties规则错误。

修复方案 #

只需要先创建原数组的副本，再对副本排序即可，这样不会触碰原有的myRepos状态：

orderMyReposByStars() {
  // 用扩展运算符创建数组副本，再排序
  return [...this.myRepos].sort((a, b) => b.stargazers_count - a.stargazers_count);
}

或者用Array.slice()来创建副本（效果和扩展运算符完全一致）：

orderMyReposByStars() {
  return this.myRepos.slice().sort((a, b) => b.stargazers_count - a.stargazers_count);
}

额外补充 #

• sort()方法默认按字符串Unicode码点排序，你这里用的a.stargazers_count < b.stargazers_count可以简化成b.stargazers_count - a.stargazers_count（数值类型直接相减更高效直观）。
• 保持computed属性的纯函数特性非常重要，这能让你的状态变化更可预测，避免出现难以排查的隐性bug。

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