기존 상태에서 계산되는 값을 캐시 가능한 computed로 표현합니다.
computed는 getter가 읽은 반응형 값이 바뀔 때만 다시 계산되고 템플릿에서는 값처럼 사용합니다. 원본에서 계산할 수 있는 값을 별도 state로 복제하지 않습니다.
getter는 외부 값을 변경하지 않는 순수 계산이어야 합니다.
매개변수가 필요한 계산이나 이벤트 시점 계산은 일반 함수가 더 적합합니다.
watch로 합계를 다시 state에 저장하면 원본과 파생값이 어긋날 수 있습니다.
로컬 프로젝트에서 확인해보세요완료율이 100이면 완료 문구를 표시하는 computed를 추가하세요.
<script setup>
import { ref, computed } from "vue";
const completed = ref(3),
total = ref(8);
const percent = computed(() => Math.round((completed.value / total.value) * 100));
</script>
<template>
<main>
<h1>진도 {{ percent }}%</h1>
<button @click="completed = Math.min(total, completed + 1)">한 강 완료</button>
</main>
</template>