【Vue.js】watchを活用してデータの変化を監視する方法

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

const count = ref(0)
const message = ref('')

// count が変わるたびに実行される
watch(count, (newValue, oldValue) => {
  message.value = `カウントが ${oldValue} から ${newValue} に変わりました`
})
</script>

<template>
  <button @click="count++">+1</button>
  <p>{{ message }}</p>
</template>

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

const message = ref('Hello, Vue.js!')

// 他の値から計算できるものは computed で書く（watch で代入しない）
const length = computed(() => message.value.length)
</script>

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

const keyword = ref('')

// 値が変わったら外部に作用する処理（ここでは保存）は watch の出番
watch(keyword, (newValue) => {
  localStorage.setItem('keyword', newValue)
})
</script>

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

const state = reactive({ count: 0 })

// NG：数値そのものを渡しても、監視にならない
// watch(state.count, (v) => { ... })

// OK：getter（関数）で渡す
watch(
  () => state.count,
  (count) => {
    console.log(`count は ${count}`)
  }
)
</script>

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

const x = ref(1)
const y = ref(2)

// 配列で複数のソースを監視（どちらかが変わると実行）
watch([x, y], ([newX, newY], [oldX, oldY]) => {
  console.log(`x: ${oldX}→${newX}, y: ${oldY}→${newY}`)
})
</script>

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

const user = reactive({ name: 'Alice', profile: { age: 25 } })

// reactive を直接渡すと、暗黙に deep になる
watch(user, (newValue, oldValue) => {
  // ネストした変更では newValue === oldValue（同じオブジェクト）
  console.log('変更されました', newValue.profile.age)
})

// getter で渡すと、オブジェクトが置き換えられたときだけ発火する
watch(
  () => user.profile,
  () => { console.log('profile が置き換えられました') }
)

// getter で渡したうえで、ネストの変更も拾いたいときは deep: true
watch(
  () => user.profile,
  () => { console.log('profile の中身が変わりました') },
  { deep: true }
)

user.profile.age++   // 1つ目と3つ目が発火
</script>

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

const query = ref('vue')

// immediate: true ならウォッチャーの作成時に1回、すぐに実行される
watch(
  query,
  (newValue) => {
    console.log('検索:', newValue)
  },
  { immediate: true }
)

// once: true（Vue 3.4 以降）なら、最初の変更の1回だけ実行される
watch(query, () => console.log('最初の変更'), { once: true })
</script>

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

const count = ref(0)

// 既定ではDOMの更新前にコールバックが動く。
// 更新後のDOMを触りたいときは flush: 'post'
watch(count, () => {
  console.log(document.querySelector('#count').textContent)
}, { flush: 'post' })
</script>

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

const count = ref(0)

// watch は停止用の関数を返す
const unwatch = watch(count, () => {
  console.log('監視中')
})

// 監視をやめる
unwatch()
</script>

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

const id = ref(1)

watch(id, (newId) => {
  const controller = new AbortController()

  fetch(`/api/items/${newId}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => { /* 結果を使う */ })

  // 次の実行の前に呼ばれる。古いリクエストを中止する
  onWatcherCleanup(() => controller.abort())
})
</script>

export default {
  data() {
    return { question: '', user: { name: 'Alice' } }
  },
  watch: {
    // メソッドの形で書く
    question(newQuestion, oldQuestion) {
      // question が変わったときの処理
    },
    // オプションを付けるときは handler を使う
    user: {
      handler(newValue) { /* ... */ },
      deep: true,
      immediate: true
    },
    // ドットでつないだパスも指定できる
    'user.name'(newValue) { /* ... */ }
  }
}