[감시자] 때때로 우리는 반응형 "사이드 이펙트"를 수행

Vue.js

<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>

버튼을 클릭할 때마다, 다음 할 일을 가져오는 감시자를 구현