[Vue3] computed 사용방법

<script setup>에서 computed를 사용하고 싶다면 아래와 같이 작성한다.

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

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

// computed value
const publishedBooksMessage = computed(() => {
  return author.value.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

computed 함수를 사용하여 변수에 할당해주면 계산된 값이 지정된다.