[Vue] Watchers

# watch()

반응형 데이터를 감시하고 감시하는 데이터가 변경되면 콜백 함수를 호출

computed랑 비슷한 역할 

 

구조

const countWatch = watch(count, (newValue, oldValue) => {
  consol.log(`newValue : ${newValue}, oldVlaue: ${oldValue}`)
})

이런 형식으로 쓴다

 

 

예시: message를 입력할 때마다 길이를 알려주기

const message = ref('')
const messageLength = ref(0)
const messageWatch = watch(message, (newValue, oldValue) => {
  messageLength.value = newValue.length
})

watch는 자동으로 쓰이기 때문에 return에 써줄 필요는 없음

 

---

# Computed와 Watchers

둘 다 데이터의 변화를 감지하고 처리함

+ 둘 다 원본 데이터를 직접 변경하는 것은 아님

 

하지만,

• Computed
  • 의존하는 데이터 속성의 계산된 값을 반환하고 활용 가능
  • 템플릿 내에서 사용되는 데이터 연산용
  • 예시: 연산된 길이, 필터링된 목록 계산 등
• Watchers
  • 특정 데이터 속성의 변화를 감시하고 작업을 수행
  • 데이터 변경에 따른 특정 작업 처리용
  • 예시: 비동기 API 요청, 연관 데이터 업데이트 용