ウォッチャーとは
簡単に言うと
データを見張る係
リアクティブな値の変化を監視し、
変化した時に指定した処理を実行する機能
どんな時に使うか
・API通信を開始するとき
・localStorageに保存するとき
・状態が変更されたときにログへ記録する
（状態を変更した時ではないので注意）
・古くなったタイマーや通信の処理を停止する
・更新後のDOMを操作する
ウォッチャーの使い方
Vue.js
<script setup>
// １：使う設定
import { ref, watch } from 'vue'
const fishCount = ref(0)
watch(fishCount, (newValue, oldValue) => {
console.log('変更前:', oldValue)
console.log('変更後:', newValue)
})
</script>
１：まずはインポートする
２：watch()の中身を書く
３：監視対象を記述（今回はfishCount）
４：第2引数に、値が変わったときに実行するコールバック関数を書く
コールバックでは、変更後の値newValueと変更前の値oldValueを受け取れる
もしオプションを設定したい場合は第三引数を設定
コールバックとは
別の関数に渡し、決められたタイミングで
呼び出してもらう関数
あとで必要になったとき、呼び出してもらう関数
「このとき、この処理をしてね」と先に渡しておく関数
Vue.js
watch(
fishCount, // 監視する値
(newValue, oldValue) => { // 変化時に呼ばれるコールバック
console.log(newValue)
}
)
fishCountが変更されたことをVue側で検知し、
適切なタイミングでコールバックを呼び出します。
開発してる方がコールバックを
実際に実行している訳ではないです。
名前付きの関数を渡すこともできる
Vue.js
function handleFishCountChange(newValue, oldValue) {
console.log(`おさかなが${oldValue}匹から${newValue}匹へ変化しました`)
}
watch(fishCount, handleFishCountChange)
実際に作ってみた
お魚の増減ボタンを押すことでコンソール内に
お魚の増減が分かるプログラムを組んでみました。
Vue.js
<script setup>
import { ref,watch } from 'vue'
const fishCount = ref(0)
// watchで監視
function handleFishCountChange(newValue, oldValue){
console.log(
`お魚が ${oldValue}匹から${newValue}匹に変わりました`
)
}
// お魚を増やす処理
function addFish(){
fishCount.value ++
}
// お魚を減らす処理
function removeFish(){
fishCount.value --
}
watch(fishCount, handleFishCountChange)
</script>
<template>
<h2>現在のお魚の数 {{ fishCount }}匹</h2>
<button @click="addFish">お魚を増やす</button>
<button @click="removeFish">お魚を減らす</button>
</template>
埋め込み部分は
シングルクォート ' ' ではなくバッククォート になるので注意
UI部分
コンソール部分
まとめ
ウォッチャー は簡単に言うとデータの見張り役
コールバック は簡単に言うと別の関数に渡し、決められたタイミングで
呼び出してもらうための関数