계산된 속성 | Vue.js

기본 예제

→ 템플릿 내 표현식은 매우 편리하지만, 간단한 작업을 위한 것이다.

• 템플릿에 너무 많은 논리를 넣으면, 비대해져 유지 관리가 어려워질 수 있다.
  • ex) 객체 내 배열이 있는 경우

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

• 위의 예제에서 author 가 이미 책을 가지고 있는지의 여부에 따라, 다른 메시지를 표시하고 싶다면 다음과 같이 작성해야 한다.
  • 삼항 연산자

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

• 템플릿이 약간 복잡해졌다.
  • 템플릿 내에서 이 코드를 두 번 이상 반복하지 싶지 않다.

→ 따라서, 반응형 데이터를 포함하는 복잡한 논리의 경우, 계산된 속성을 사용하는 것이 좋다!

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 계산된 ref
**const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
}**)
</script>

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ **publishedBooksMessage** }}</span>
</template>

• 계산된 ref 는 템플릿에서 자동으로 언래핑되므로, 템플릿 표현식에서 .value 없이 참조할 수 있다.
  • 계산된 속성은 의존된 반응형을 자동으로 추적한다.

계산된 캐싱 vs 메서드