[Vue3] Computed

Methods로 변화가 적고 간단한 계산식을 구현 할 경우 상태가 변하지 않더라도 매번 연산작업이 수행되어 효율성이 떨어지는 상황에 대체할 수 있는 기능으로 Computed를 사용합니다. 만약 이전 계산식에서 Observing하고있는 상태값이 변하지 않을 경우 재연산 하지 않고 cache data를 그대로 사용하여 효율적으로 결과값을 가져올 수 있습니다.

<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'
  ]
})

// computed 선언식
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})

// or
// computed 표현식
function publishedBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

console.log('publishedBooksMessage.value 로 접근가능')
</script>

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

참조 : https://v3-docs.vuejs-korea.org/guide/essentials/computed.html