[Vue] onMounted, watch, watchEffect

onMounted, watch, watchEffect는 모두 Vue3에서 컴포지션 API를 사용할 때 자주 쓰이는 반응형(reactivity) 관련 훅입니다.

 

 

✔️ onMounted

• 컴포넌트가 DOM에 마운트된 직후 한 번 실행되는 함수입니다.
• 주로 초기 데이터 로딩, 이벤트 리스너 등록 등에 사용됩니다.

import { onMounted } from 'vue'

onMounted(() => {
  console.log('컴포넌트가 마운트됨!')
  fetchData()
})

 

✔️ watch

• 하나 이상의 반응형 데이터의 변화를 감지해서 실행합니다.
• 예전 Vue의 watch 옵션과 거의 동일한 역할입니다.
• 값이 변경될 때만 실행됩니다.
• ref, reactive 모두 감지할 수 있고, deep, immediate 옵션도 사용할 수 있습니다.

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newVal, oldVal) => {
  console.log(`count가 ${oldVal}에서 ${newVal}로 변경됨`)
})

 

✔️ watchEffect

• 반응형 데이터에 의존하는 함수를 감지해서 자동 실행합니다.
• 함수 내부에서 사용하는 모든 반응형 데이터에 자동으로 의존성 추적이 됩니다.
• 최초 실행 + 의존 데이터 변경 시 재실행
• 위 코드는 name.value가 바뀌면 자동으로 다시 실행됩니다.
• 별도로 의존성을 명시하지 않아도 됩니다.

import { ref, watchEffect } from 'vue'

const name = ref('홍길동')

watchEffect(() => {
  console.log(`이름이 ${name.value}로 설정됨`)
})

 

차이점 

항목	onMounted	watch	watchEffect
실행 시점	컴포넌트 마운트 시	감시 대상 변경 시	즉시 실행 + 의존성 변경 시
의존성 추적	없음	수동 지정	자동 추적
사용 용도	초기 작업	특정 데이터 변경 반응	반응형 데이터 기반 자동 처리
제어 가능성	단순 실행	구체적 제어 가능 (old, new 값 등)	제어 어려움 (디버깅도 다소 어려움)

 

 언제 어떤 걸 써야 할까?

• 초기 로딩 / DOM 작업: onMounted
• 특정 변수의 변경 감지: watch
• 여러 변수 변경 자동 추적 / 반응형 로직 처리: watchEffect