计算属性中的意外副作用

Question

我不确定为什么我在使用以下代码时会在计算机属性错误中产生意外的副作用。

错误：

  ✘  https://google.com/#q=vue%2Fno-side-effects-in-computed-properties  Unexpected side effect in "orderMyReposByStars" computed property
  src/components/HelloWorld.vue:84:14
        return this.myRepos.sort((a, b) => a.stargazers_count < b.stargazers_count)

HTML:

 <div v-if="myRepos && myRepos.length > 0">
  <h3>My Repos</h3>
  <ul>
    <li v-for="repo in orderMyReposByStars" v-bind:key="repo.id">
      <div class="repo">
        {{repo.name}}
        <div class="pull-right">
          <i class="fas fa-star"></i>
          <span class="bold">{{repo.stargazers_count}}</span>
        </div>
      </div>
    </li>
  </ul>
</div>

js:

 export default {
  name: 'HelloWorld',
  data () {
    return {
      myRepos: null,  <-- THIS IS ULTIMATELY AN ARRAY OF OBJECTS
    }
  },
  computed: {
    orderMyReposByStars: function () {
      return this.myRepos.sort((a, b) => a.stargazers_count < b.stargazers_count)
    },
...

据我所知，根据此处的文档，这看起来是正确的 https://v2.vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

原文由 Catfish 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

.sort 改变原始数组。

为避免这种情况，请在排序之前克隆数组。

.slice() 是克隆阵列最简单的方法之一。请参阅 https://stackoverflow.com/a/20547803/5599288

return this.myRepos.slice().sort((a, b) => a.stargazers_count < b.stargazers_count)

---

在旁注中， null.sort() 或 null.slice() 将抛出错误。也许将 myRepos 的初始值设置为空数组 [] 而不是 null 会更好

原文由 Jacob Goh 发布，翻译遵循 CC BY-SA 3.0 许可协议