vue3 では、watch を使用するいくつかの一般的な方法

早速、実際のコードに移りましょう。

まず 2 つの変数 a、b を定義します。

import { ref, watch } from 'vue'

const a = ref(0)
const b = ref(0)

1. 各変数を個別に監視する

watch(() => a.value, (newA, oldA) => {
  console.log(newA, oldA)
})
watch(() => b.value, (newB, oldB) => {
  console.log(newB, oldB)
})

2. 複数の変数を配列に入れて監視を組み合わせる

watch([a, b], ([newA, newB], [oldA, oldB]) => {
  console.log('newA, oldA:', newA, oldA)
  console.log('newB, oldB:', newB, oldB)
})

3. 複数の変数を配列に入れて総合的に監視する

watch([a, b], (newVal, oldVal) => {
  console.log(newVal, oldVal)
}, { immediate: true, deep: true })

また、vue3では無限ループが発生した場合、watchで監視している変数は100回までしか監視されず、メモリ/スタックのオーバーフロー問題が回避されることが検証で分かりました。

上記の内容は私の開発経験を要約したものであり、類似点がある場合はまったくの偶然です。また、内容に間違いがございましたらコメント欄にてご指摘くださいますようよろしくお願いいたします！