📚 Reference

• 공식 문서 1

📜 Chapter

computed

watchEffect

watch

• watch
• watch 속성은 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성이다.
• Vue의 Composition API에서 특정 반응형 데이터의 변화를 감지하고, 그 변화에 따라 부수적인 작업을 수행할 수 있게 해주는 함수이다.

watch - 역할

• 특정 데이터 변화 감지: ref, reactive, computed와 같은 반응형 상태가 변경될 때마다 실행된다.
• 부수 효과(Side Effects) 수행: 데이터가 변경되었을 때, DOM 조작, API 호출(비동기 작업), 라우터 이동 등 계산된 값을 반환하는 것 외의 다른 작업을 수행할 때 적합하다.
• 두 개의 인자: 감시 대상(source)의 이전 값과 새로운 값을 콜백 함수의 인자로 제공한다.

import { ref, watch } from 'vue';

// 1. 감시할 반응형 데이터
const count = ref(0); 

// 2. watch 함수 정의
watch(
  // 감시 대상 (Source)
  count, 
  // 콜백 함수 (Callback)
  (newValue, oldValue) => {
    console.log(`count가 ${oldValue}에서 ${newValue}로 변경되었습니다.`);
    // 이곳에서 API 호출, 비동기 로직, 기타 부수 효과 등을 처리합니다.
  }
);

count.value = 1; // 💡 watch 콜백 함수 실행

다중 소스 감시 및 배열 감시