const count = ref(1);
const double = computed(() => count.value * 2); // count가 바뀔 때만 재계산됨
computed는 기존 데이터를 가공하여 새로운 값을 생성할 때 사용.// 단일 감시
watch(count, (newVal, oldVal) => { ... });
// 동시 감시
watch([count, name], ([newCount, newName], [oldCount, oldName]) => { ... });
watch는 특정 데이터의 변화를 감지한 후 로직을 실행할 때 사용const state = reactive({ user: { age: 20 } });
watch(() => state.user, (val) => { ... }, { deep: true });
reactive로 선언된 객체를 감시하면 내부 속성이 바뀔 때마다 실행deep 옵션은 자동으로 true로 설정ref 객체의 내부를 감시하려면 { deep: true } 설정이 필요watch(source, (val) => { ... }, { immediate: true });
watchEffect는 감시 대상을 명시하지 않고, 함수 내부에서 참조하는 모든 반응형 데이터를 자동으로 추적immediate: true와 유사)| 구분 | computed |
watch |
watchEffect |
|---|---|---|---|
| 목적 | 새로운 값 산출 (결과값 반환) | 특정 상태 변화에 따른 로직 실행 | 의존성 기반의 자동 로직 실행 |
| 캐싱 | 지원 (성능 최적화) | 지원 안 함 | 지원 안 함 |
| 실행 시점 | 참조될 때 (Lazy) | 명시된 타겟이 바뀔 때 | 즉시 실행 + 의존성 바뀔 때 |
| 권장 상황 | 템플릿 내 복잡한 연산 | 비동기 호출, 외부 라이브러리 연동 | 다수의 데이터를 참조하는 설정 로직 |
const isAdult = computed(() => user.age >= 20);
// 계산된 결과(isAdult)가 바뀔 때 로그 전송
watch(isAdult, (newVal) => {
if (newVal) console.log("성인 인증 완료");
});
computed 또한 내부적으로는 ref와 같은 반응형 객체를 반환하기 때문에, watch의 대상이 될 수 있음computed
watch
watchEffect