Vue 3のComposition APIでは、watch関数を使用してデータ変更を監視できます。
目次
1. 簡単なデータの監視
import { reactive, watch } from 'vue'
const state = reactive({
count: 0
})
watch(() => state.count, (newValue, oldValue) => {
console.log(`countの値が${oldValue}から${newValue}に変更されました`)
})このコードでは、state.countの値が変更された場合にコールバック関数が呼び出されます。コールバック関数の第一引数には新しい値が渡され、第二引数には古い値が渡されます。
2. 監視を停止する
watch関数は、監視を停止するために返される関数を返します。次の例では、5回目の変更で監視を停止する方法を示します。
import { reactive, watch } from 'vue'
const state = reactive({
count: 0
})
const stop = watch(() => state.count, (newValue, oldValue) => {
console.log(`countの値が${oldValue}から${newValue}に変更されました`)
if (newValue === 5) {
stop()
}
})3. 監視するプロパティを動的に変更する
watch関数を使用して、動的にプロパティを監視することもできます。以下の例では、propNameの値が変更されるたびに、新しいプロパティを監視する方法を示します。
import { reactive, watch } from 'vue'
const state = reactive({
count: 0,
prop1: 0,
prop2: 0,
propName: 'prop1'
})
watch(() => state[state.propName], (newValue, oldValue) => {
console.log(`${state.propName}の値が${oldValue}から${newValue}に変更されました`)
})
// propNameを変更する
state.propName = 'prop2'4. 非同期処理を実行する
watch関数のコールバック関数内で非同期処理を実行する場合、async/awaitを使用してください。以下の例では、state.countの値が変更されたときに、2秒待機してからコンソールにログを出力します。
import { reactive, watch } from 'vue'
const state = reactive({
count: 0
})
watch(async () => {
await new Promise(resolve => setTimeout(resolve, 2000))
console.log(`countの値が変更されました: ${state.count}`)
})以上がVue 3のComposition APIにおけるwatch関数の基本的な使い方についての説明です。