감시자 | Vue.js

기본 예제

→ 계산된 속성은 계산되어 파생된 값을 선언적으로 사용할 수 있게 한다.

• 그러나, 상태 변경에 대한 반응으로 **“사이드 이펙트”**를 수행해야 하는 경우가 있다.

• Composition API를 사용하는 경우, watch 함수를 이용하여 반응형 속성이 변경될 때마다 함수를 실행할 수 있다.

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

const question = ref('')
const answer = ref('질문에는 일반적으로 물음표가 포함됩니다.')

// watch는 ref에서 직접 작동합니다
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.indexOf('?') > -1) {
    answer.value = '생각 중...'
    try {
      const res = await fetch('<https://yesno.wtf/api>')
      answer.value = (await res.json()).answer === 'yes' ? '네' : '아니오'
    } catch (error) {
      answer.value = '에러! API에 연결할 수 없습니다. ' + error
    }
  }
})
</script>

<template>
  <p>
    예/아니오 질문:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</template>

깊은 감시자

→ watch() 로 반응형 객체를 직접 호출하면, 암시적으로 깊은 감시자가 생성된다.

• 콜백은 중첩된 모든 변경 사항에 대해 실행된다.
  • 반응형 객체를 반환하는 getter

const someObject = reactive({ count: 0 })

watch(someObject, (newValue, oldValue) => {
  // 중첩된 속성 변경사항이 있을 경우 실행됩니다.
  // 참고:
  // `newValue`와 `oldValue`는 같습니다.
  // 둘 다 동일한 객체를 참고하고 있기 때문입니다!
})

someObject.count++

• 위의 예시와는 달리, getter가 다른 객체를 반환하는 경우에만 콜백이 실행된다.

const state = reactive({
  someObject: { count: 0 }
})

watch(
  () => state.someObject,
  () => {
    // state.someObject가 교체될 때만 실행됩니다.
  }
)