computed 속성은 다른 반응형 상태로부터 파생된 반응형 값입니다. 의존하는 값이 변경되면 자동으로 재계산되며, 결정적으로 결과를 캐싱하여 의존하는 무언가가 실제로 변경될 때만 다시 실행됩니다.
vue
<script setup>
import { ref, computed } from "vue";
const firstName = ref("Ann");
const lastName = ref("Lee");
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
// firstName 또는 lastName이 변경될 때마다 fullName이 자동으로 갱신됨
</script>
<template>
<p>{{ fullName }}</p> <!-- ref처럼 자동 언래핑 -->
</template>
핵심 이점: 캐싱
vue
<script setup>
const items = ref([/* ...1000개 항목... */]);
const expensiveTotal = computed(() => {
return items.value.reduce((sum, i) => sum + i.price, 0); // 변경당 한 번만 실행
});
</script>
<template>
<p>{{ expensiveTotal }}</p>
<p>{{ expensiveTotal }}</p> <!-- 캐시에서 재사용 — 재계산 안 함 -->
</template>
템플릿에서 을 여러 번 사용하더라도 계산은 실행되고 캐시된 값이 재사용됩니다. 가 변경될 때만 재계산됩니다. 일반 메서드는 렌더링할 때마다 다시 실행됩니다.