Vue.js] 4. 계산된 속성

템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것이다. 템플릿에 너무 많은 논리를 넣으면 유지관리가 어렵다. 

예를들어 객체 내 배열이 있는 경우 

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  }
}

<p>책을 가지고 있다:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

span 내의 표현식이 반복되거나 복잡한 경우 아래와 같이 계산된 속성을 사용하는 것이 좋다. 

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 계산된 값을 반환하는 속성
    publishedBooksMessage() {
      // `this`는 컴포넌트 인스턴스를 가리킵니다.
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}
<p>책을 가지고 있다:</p>
<span>{{ publishedBooksMessage }}</span>

또는 메서드를 사용할 수도 있다. 

<p>{{ calculateBooksMessage() }}</p>
// 컴포넌트 내에서
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}

 

두 가지 방법의 차이점은 계산된 속성은 의존된 반응형을 기반으로 캐시된다는 점이다. 

계산된 속성은 의존된 반응형 중 일부가 변경된 경우 재평가된다. 즉 author.books가 변경되지 않는 한 이전에 계산된 결과를 즉시 반환한다. 

computed: {
  now() {
    return Date.now()
  }
}

Date.now()는 반응형으로써 의존된 것이 아니기 때문에 계산된 속성이 업데이트 되지 않는다. 

이와 반대로 메서드는 리렌더링이 발생할 때마다 항상 함수를 실행한다. 

 

캐싱을 원하지 않는 경우에만 메서드 호출을 사용하자. 

 

수정 가능한 계산된 속성

계산된 속성은 기본적으로 getter 전용이다. 새 값을 할당하려면 런타임 에러가 발생한다. 드물게 수정 가능한 계산된 속성이 필요한 경우 get(), set(newValue)를 사용할 수 있다. 

 

계산된 속성 안에서 다른 상태를 변경시키거나, 비동기 요청을 하거나, DOM을 변경하지 말자. 단지 값을 계산하고 반환하도록 하자. 계산된 속성은 읽기전용으로 처리되어야 하며 변경되지 않아야 한다. 대신 새 계산을 트리거하기 위해 의존하는 소스 상태를 업데이트 하자.