[Vue3] 리스트 렌더링 (배열)

1. 메서드

• 수정 메서드 : push(), pop(), shift(), unshift(), splice(), sort(), reverse()
• 배열 교체 메서드 (새 배열 반환) : filter(), concat(), slice()
  • 새 배열을 반환한다고 다시 렌더링되는 것은 아니다. Vue는 DOM 엘리먼트 재사용을 최대화하기 위해 몇가지 스마트 휴리스틱을 구현하여서 이전 배열을 다른 배열로 바꾸는 과정에서 서로 중복되는 객체를 매우 효율적으로 처리한다.

2. 필터링 / 정렬 결과 표시

아래 예제는 filter() 메서드를 사용해 <li>2</li> <li>4</li>가 출력되는 코드이다.

<template>
  <ul>
    <li :key="index" v-for="(num, index) in evenNums">{{  num }}</li>
  </ul>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      numbers: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    evenNums() {
      return this.numbers.filter(n => n % 2 === 0)
    }
  }
}
</script>

📌 reverse()와 sort() 메서드는 원본 배열을 수정하므로 계산된 속성의 getter 함수에서 피해야 한다.

• 다음 메서드를 호출하기 전에 원본 배열의 복사본을 만든다.

- return nums.reverse()
+ return [...nums].reverse()