[Vue.js] tutorial - 10. Watchers

📍watch

- watchers를 사용하면 사이드 이펙트를 반응적으로 수행할 수 있다

- 예) 특정 값이 바뀌면 콘솔에 숫자 출력하기

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {
  // yes, console.log() is a side effect
  console.log(`new count is: ${newCount}`)
})

- 위 예시에서 count의 값이 바뀌면 콜백 함수가 실행된다

- ref 말고도 다른 타입의 데이터를 watch가 감지하게 할 수 있다

- 예시

<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() // 최초 1번은 실행됨(안그러면 todoData가 null)

watch(todoId, fetchData) // todoId가 바뀔 때마다 fetchData 실행
</script>

<template>
  <p>Todo id: {{ todoId }}</p>
  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>