Vue 3 はリアクティブなデータを監視するために watch と watchEffect の二つの主要なメソッドを提供している。この記事では、それぞれのメソッドがどのように動作するのか、そしてどのようなケースでそれぞれを使用すべきかについて解説する。
watch の基本的な使い方
watch は Vue 2 から存在しているメソッドで、リアクティブなプロパティやリファレンスを監視し、その値が変更されたときにコールバック関数を実行する。
以下の式では、countをwatch関数の第一引数として明示的に指定し、countが更新されるたびにコールバック関数が発火する。
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`)
})watchEffect の基本的な使い方
watchEffect は Vue 3 で新しく導入された。このメソッドは、関数内で参照されるすべてのリアクティブな依存関係を自動的に監視する。
以下のコードの場合、countが変更されるたびにwatchEffectのコールバック関数が発火するようになっている。
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log(`count is now ${count.value}`)
})watch とwatchEffect の違い
- 依存関係の指定:
watchでは監視するリアクティブなプロパティを明示的に指定する必要がある。watchEffectは関数内で参照された全てのリアクティブなプロパティを自動的にトラックする。 - 初期実行:
watchEffectは定義された直後に一度実行される。watchはデフォルトで初回実行されない。しかしこの問題については、immediate: trueオプションを用いて初回実行を可能にできる。（参照: 即時ウォッチャー） - 古い値と新しい値:
watchはコールバックで古い値と新しい値の両方にアクセスできるが、watchEffectではこの機能はない。
詳しくは公式ドキュメントに記載があるため、要チェック。
https://ja.vuejs.org/guide/essentials/watchers.html
【主観】watch とwatchEffect 選択方法
それぞれのコード違いについて解説してきたが、「対象のデータを監視する」という観点ではどちらも目的を達成することができる。つまり結論、watchでもwatchEffectでもどちらでも良い。
以下は個人的なwatch、watchEffectの選択基準であるため参考まで。
例えばwatchの構文は以下のようになるが、newValとoldValをコールバックの引数で取得することができる。そのため「変更前の値もしくは、変更後の値を使って何かしらの処理を行いたい場合」にwatchを使用するようにしている。
watch(count, (newVal, oldVal) => {
// 処理
})一方でwatchEffectの構文は以下のようになっており、処理自体は自動的に発火する特性を持っているため「特定の値が変更された場合、変更前、変更後の値を使用せずに自動で処理を行う場合」に使用するようにしている。
watchEffect(() => {
// 処理
})※ watchEffectは、監視する値を把握しにくいデメリットがあるためwatchを使用することが多い。
