[VUE] Composition API - computed, watch

computed와 watch는 반응형 데이터의 변경을 감지하고 적절한 처리를 수행할 때 유용합니다. 각각의 사용법을 설명하겠습니다.

 

📌computed (계산된 속성)

computed는 종속된 반응형 데이터가 변경될 때 자동으로 재계산되는 속성입니다. 주로 값의 캐싱과 의존성 기반 자동 업데이트가 필요할 때 사용합니다.

<template>
    <div>
        <p>가격 : {{ price }}</p>
        <p>수량 : {{ quantity }}</p>
        <p>총 가격 : {{ totalPrice }}</p>
    </div>
</template>

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

    const price = ref(10000);   // 가격
    const quantity = ref(3);    // 수량
    
    // 총 가격을 계산할 computed
    const totalPrice = computed(() => price.value * quantity.value);
</script>

 

 

✅ 출력 값

 

✅ 특징

• 종속된 반응형 값(price, quantity)이 변경될 때만 다시 계산 (캐싱 기능)
• computed 값은 함수처럼 호출하지 않고 속성처럼 접근(totalPrice.value)

 

 

 

📌watch (감시자)

watch는 특정 반응형 데이터의 변화를 감지하고 특정 로직을 실행할 때 사용됩니다.

<template>
    <div>
        <p>count : {{ count }}</p>
        <button @click="count++">count 증가</button>
    </div>
</template>

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

    const count = ref(0);

    // count 값이 변경될 때마다 실행되는 watch
    watch(count, (newVal, oldVal) => {
        console.log(`count값이 ${oldVal}에서 ${newVal}로 변경되었습니다.`)
    })
    
</script>

 

 

✅ 출력 값

 

✅ button 클릭 후 출력 값

 

✅ button 클릭 후 콘솔

 

✅ 특징

• 첫 번째 인자로 감시할 반응형 데이터를 전달
• 두 번째 인자로 (newValue, oldValue) => { ... } 형태의 콜백 함수를 전달
• 반응형 데이터가 변경될 때마다 실행

 

 

 

📌computed, watch 차이점

비교항목	computed	watch
사용 목적	종속된 값이 변경될 때 자동 계산	특정 값이 변할 때 실행할 동작 수행
리턴값	계산된 값	콜백 함수 실행 (리턴값 없음)
캐싱 여부	O (같은 값이면 재계산 안 함)	X (항상 실행)
비동기 처리	X (권장되지 않음)	O (비동기 처리 가능)

 

 

 

📌결론

• computed : 데이터의 변화에 따라 자동으로 계산되는 값을 생성할 때 사용합니다.
• watch : 특정 데이터의 변화를 감지하여 특정 로직을 실행할 때 사용합니다.