Vue - 감시자

감시자

때때로 우리는 반응형 "사이드 이펙트"를 수행해야 합니다. 예를 들어 숫자가 변경될 때마다, 콘솔 로그로 출력하는 것입니다. 우리는 watch(감시자)로 이를 구현할 수 있습니다:

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // 예, console.log()는 사이드 이펙트입니다.
  console.log(`새로 센 숫자 값은: ${newCount}`)
})

watch()는 ref를 직접 감시할 수 있으므로, count의 값이 변경될 때마다 콜백이 실행됩니다. watch()는 다른 타입의 데이터 소스도 볼 수 있습니다.

콘솔 로그를 출력하는 것 대신, ID 값이 변경될 때 새 데이터를 가져오도록 해봅시다.
현재 코드는 컴포넌트가 마운트 될 때, Mock API에서 할 일 데이터를 가지고 오는 코드입니다.
할 일을 가져오기 위해 ID 값을 증가시키는 버튼도 있습니다.
버튼을 클릭할 때마다, 다음 할 일을 가져오는 감시자를 구현해 봅시다.

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

const todoId = ref(1)
const todoData = ref(null)

async function fetchData() {
  todoData.value = null
  const res = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  todoData.value = await res.json()
}

fetchData()

watch(todoId, fetchData)
</script>

<template>
  <p>할 일 id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">다음 할 일 가져오기</button>
  <p v-if="!todoData">로딩...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

뷰 듀토리얼