Vue의 computed 활용

Vue Instance에서 computed의 활용에 대한 예를 정리한다.

1. HTML내에서 사용하는 data값의 가공이 필요한 경우

: '나쁨' 경우와 같이 '{{}}' 안에서 해결하는 것보다 computed에서 해결하면, 코드도 깔끔해지고 재사용도 가능하므로 computed 활용 권장

나쁨

{{ fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') }}

좋음

<!-- In a template --> {{ normalizedFullName }}

// The complex expression has been moved to a computed property computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') } }

2. 그리고 List를 구현할 때 사용하게 되는 v-if, v-for에 대한 공홈 문서 권장사항을 참조하면 좋다.

v-for 와 같은 요소(element)에 v-if 를 사용하지 말아라.

1) 목록 안의 아이템을 필터링 하라 (e.g. v-for="user in users" v-if="user.isActive"). 이 경우에, users를 필터링 된 목록을 반환하는 새로운 computed 속성으로 변경하라 .

List에서 visible할 항목과 invisible할 항목을 구현할 때 이렇게 구현하기 마련이다.

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  <li>
</ul>

다음과 같이 computed를 활용하여 activeUsers 값을 정의하여 for문을 활용하면 v-for, v-if의 중복사용을 피할 수 있다.

<ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} <li> </ul>

computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}

=> data: 에서 정의하는 정적인 값이 아닌 동적으로 새로운 속성 값이 필요한 경우 computed를 활용하면 된다.

2) 리스트를 숨길 필요가 있을 경우 렌더링을 피하라.(e.g. v-for="user in users" v-if="shouldShowUsers"). 이 경우에, 컨테이너의 요소로 v-if 를 옮겨라.