[Vue3] Computed와 watch의 차이

1. Computed (계산된 속성)

📌 특징
1) 기존 데이터를 계산하거나, 가공할 때 사용 (파생 데이터)
2) 종속된 데이터가 변경되지 않으면 이전 결과를 재사용하여 성능 최적화(캐싱)
** 템플릿에서 여러 번 호출해도 캐싱된 값을 사용한다.
3) 종속된 데이터가 변경되면 자동으로 재계산

<template>
  <p>사용자 이름: {{ fullName }}</p>
</template>

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

const firstName = ref('홍');
const lastName = ref('길동');

// computed를 사용하여 fullName을 계산
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

2. Watch(감시자)

📌 특징
1) 특정 데이터를 감시하고, 데이터가 변경될 때 추가 작업을 수행함
2) API 호출이나 setTimeout과 같은 비동기 작업에 적합
3) 단순한 계산이 아닌 여러 단계의 작업이 필요할 때 유용
4) 초기 로드시에도 실행 가능

<template>
  <input v-model="query" placeholder="검색어 입력" />
</template>

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

const query = ref('');

// watch를 사용하여 query 값 변경 시 API 호출
watch(query, (newVal) => {
  console.log('API 호출: 검색어는', newVal);
  fetchResults(newVal);
});

function fetchResults(query) {
  // API 호출 로직
  console.log(`"${query}"에 대한 결과 가져오기`);
}
</script>

📌구조
watch(source, callBack)
source: 감시할 데이터 정의(getter함수, ref, 배열, 함수 등)
callBack : 데이터 변화 감지시 실행할 함수

  watch(
      () => x.value + y.value,
      (sum) => {
          console.log(sum);
      }
  )

1) x.value와 y.value(ref 반응형 객체)를 자동으로 추적하여 값이 변경되는 것을 감시한다.
2) x.value+y.value의 결과가 sum으로 전달된다

• getter함수 ()=>{}
  ref 변수의 경우 값을 직접 추척할 수 있으나, reactive와 같은 객체는 특정 속성을 감시하려면 getter가 필요하다.

//watch(obj.count, (count) 불가
  const obj = reactive({ count: 0 });
  watch(
    () => obj.count,  // getter 함수, 
    (newCount, oldCount) => {
      console.log(`Count가 ${oldCount}에서 ${newCount}로 변경되었습니다.`);
    }
  );

📌 속성
{ immediate: true } : 값 변경시 즉시 실행
{ once: true } : 값 변경시 한 번만 실행
{flush: 'post'}: DOM 업데이트 후 접근
{flush: 'sync'} : 동기적으로 실행

3. 차이점

• computed : 데이터 가공이나 템플릿에서 반복적으로 사용되는 값이 필요한 경우 사용 (포맷팅 등)
• watch : 데이터 변경시 추가 작업이 필요한 경우 사용(api호출, 로그 작성 등)

특징	Computed	Watch
목적	계산된 속성 제공 (템플릿에서 데이터 가공)	데이터 변경 감지 후 추가 작업 수행
캐싱	O	X (변경 시마다 실행)
사용	주로 템플릿과 함께 사용	메서드 또는 비동기 작업 처리
의존성	의존성이 명확 (자동 추적)	지정한 데이터를 수동으로 감시
시점	컴포넌트 렌더링 시 계산	immediate: true 옵션 사용 시 초기 실행 가능

4. 조합 사용

<template>
  <p>검색 결과: {{ filteredItems }}</p>
  <input v-model="query" placeholder="검색어 입력" />
</template>

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

const query = ref('');
const items = ref(['apple', 'banana', 'cherry']);
const filteredItems = ref([]);

// query를 가공해서 소문자로 변환
const searchQuery = computed(() => query.value.trim().toLowerCase());

// searchQuery를 감시하여 필터링된 결과를 갱신
watch(searchQuery, (newVal) => {
  filteredItems.value = items.value.filter((item) => 
    item.includes(newVal)
  );
});
</script>