Vue3のwatchとwatchEffectの使い分け

Vue 3でwatchとwatchEffectのどちらを使うべきかは、次のような状況に応じて選択すると良いです。

1. watchを使うべきケース

• 特定のデータやプロパティの変化を監視したい場合
  • 具体的にどの値の変化に反応するか指定できるため、無駄な処理を防ぎやすい。
• 副作用を遅延させたい場合
  • 例えば、API呼び出しをデータの変化に応じて行いたい場合など。
• 旧式の Vue 2 スタイルの watchに慣れている場合
  • Vue 3のwatchはVue 2とほぼ同じ使い方ができるので、移行がスムーズ。

例: フォーム入力の値を監視

import{ ref, watch }from'vue';const name =ref('');watch(name,(newValue, oldValue)=>{console.log(`Name changed from ${oldValue} to ${newValue}`);});

2. watchEffectを使うべきケース

• リアクティブな依存関係を自動でトラッキングしたい場合
  • 明示的にどの値を監視するか指定しなくても、関数内で使用しているリアクティブな値を自動的に検出して監視します。
• 初期実行が必要な場合
  • watchEffectは登録直後に一度実行されるため、初期化処理などに便利。
• 簡単なリアクティブな副作用を設定したい場合
  • 記述がシンプルで、監視対象を明示する必要がない。

例: 自動的に監視するリアクティブな処理

import{ ref, watchEffect }from'vue';const count =ref(0);watchEffect(()=>{console.log(`Count is now: ${count.value}`);});

使い分けの指針

• 依存関係が明確→ watch

  • 明確なデータ監視が必要な場合に適しています。
  • 複数の値を監視する場合や、データの変化による副作用が複雑な場合に便利。

• 依存関係が曖昧またはシンプル→ watchEffect

  • 明示的に監視対象を指定する必要がなく、軽量な副作用処理に向いています。

注意点

• watchEffectは自動トラッキングする分、無駄な依存関係が加わる可能性があります。

  • 不要な依存を防ぐために、依存関係のトラッキングを注意深く行う必要があります。

• watchは指定した値にのみ反応するので、意図しない挙動を避けやすいです。

結論

• 具体的な値を明示的に監視する必要がある場合:watch
• リアクティブなデータにシンプルに反応させたい場合:watchEffect

実際のプロジェクトでは、両方を併用することが多いです。用途に応じて適切な方法を選びましょう。