계산된 속성에 예기치 않은 부작용이 있습니다.

계산된 속성에 예기치 않은 부작용이 있습니다.

아래 코드와 함께 컴퓨터 속성 오류로 인해 예상치 못한 부작용이 발생하는 이유를 모르겠습니다.

오류:

 ✘  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://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results에 있는 문서에 따르면 이것이 올바른 것으로 보입니다.

.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

2021년 쉽고 읽기 쉬운 솔루션...

사용 구문만:

computed: {
  orderMyReposByStars: function () {
     return [...this.myRepos].sort((a, b) => a.stargazers_count < b.stargazers_count)
  },
}

마이 솔루션은 정렬 전에 필터를 추가하는 것입니다.

Array.filter(() => true).sort((a, b) => a.menu_order - b.menu_order);

언급URL : https://stackoverflow.com/questions/49869081/unexpected-side-effect-in-computed-property