본문 바로가기

Vue

[Vue3] Watch, WatchEffect

  • watch : 특정 데이터가 변경되었을 때 실행, 새로운 데이터와 이전의 데이터를 가져옴 (lazy)
/ watching a getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)
  • watchEffect : 의존성이 있는 데이터에 대해서 즉각적으로 실행 (immediately), 함수 내부에 있는 여러 반응값을 관찰해야 할 때마다 사용하고 그 중 하나가 업데이트 될 때 마다 반응
const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0