Composition API 의 computed( ) 간단 개념 및 사용법

 

 

[ 개념 ]

• 계산된 값(computed value)을 만들 때 사용
• 다른 반응형 데이터를 기반으로 자동으로 계산되는 값을 정의
  
  • ref()나 reactive() 로 만든 값이 바뀌면, computed() 도 자동으로 다시 계산됨

 

 

 

[ 예시 ] 

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

// 반응형 상태
const price = ref(100)
const quantity = ref(2)

// 계산된 값: 총합
const total = computed(() => price.value * quantity.value)
</script>

<template>
  <div>
    <p>가격: {{ price }} 원</p>
    <p>수량: {{ quantity }} 개</p>
    <p>총합: {{ total }} 원</p>
  </div>
</template>

 

- price 나 quantity 가 바뀌면 total 도 자동으로 다시 계산됨

- total 은 그냥 변수 처럼 쓸 수 있지만, 내부적으로는 computed() 가 캐싱하고 있음

 

 

 

 

 

[ 참고 ]

 

https://ko.vuejs.org/guide/essentials/computed

Vue.js

 

 

https://ko.vuejs.org/api/reactivity-core.html

Vue.js