실전 코드로 배우는 Vue.js

219

CHAPTER 05

컴포지션 API

5.55.5

computedcomputed

()()

computed

프로퍼티와 마찬가지로

computed

()

또한 특정 반응형 데이터를 바탕으로 새로

운 반응형 데이터와 캐시 데이터 값을 생성한다.

ref

()

또는

reactive

()

달리

computed

()

는

읽기 전용

참조 객체를 반환한다. 다시 말해 값을 직접 재할당할 수 없다.

옵션

API

로 작성된 [예제

3

-

11

]을

computed

()

훅 방식으로 고치면 [예제

5

-

15

]와 같다.

예제

5-15

computed

()

방식으로 작성한

PalindromeCheck

컴포넌트

<script lang="ts" setup>

import { ref, computed } from 'vue'

const message = ref('Hello World')

const reversedMessage = computed<string>(

() => message.value.split('').reverse().join('')

)

</script>

computed

()

는

script

섹션에서 객체를 반환하며, 이 객체는

ref

()

나

reactive

()

처럼

value

프로퍼티를 통해 (

reversedMessage

.

value

) 값에 접근한다.

[예제

5

-

16

]은

computed

()

안에서 또 다른

computed ...