Vue.jsにおけるデータ監視：watch() vs watchEffect()、どちらを選ぶべき？

■はじめに

Vue.jsを学習中のエンジニアです👩🏻‍💻
今回は、開発中にデータの変更を監視する際、watch()、watchEffect()　実際どちらを使用するのがオススメなのかについて記事を書こうと思います！
Vueの公式ドキュメントに詳細がありますが、簡潔に理解できるようにまとめましたので、サクッと理解したいという方にも読んでいただけると嬉しいです！

■watch()、watchEffect()の特徴

watchEffect()

• リアクティブ変数の変化を監視する
  • コールバック関数内で利用されているリアクティブ変数を全て監視する
    →そのため、どれか１つの変数でも値が変更されるとコールバック関数を実行してしまう🙄

watchEffect((): void => {
 リアクティブ変数に応じて実行される処理
})

watch()

• 監視対象を明示的に指定する
• コールバック関数内で変更前と変更後の値にアクセス可能

watch(監視対象リアクティブ変数, (newValue, oldValue) => {
  // 監視対象が変化した際に実行される処理
})

第一引数：監視対処リアクティブ変数
第二引数：コールバック関数

異なる点

初期起動時にコールバック関数を実行する点に違いがある！

• watch():初期起動時にコールバック関数を実行しない
• watchEffect():初期起動時にコールバック関数を実行する

■watch()メソッドでよく使用されるオプション

※個人的によく使用するオプションを2つ紹介しています。

• { immediate: true }
  初期起動時にコールバック関数を即時実行する

watch(監視対象リアクティブ変数,(): void => {
 監視対象が変化した際に実行される処理
}),
{immediate: true}

• { deep: true }
  オブジェクトや配列内の深い階層まで監視する必要がある場合に役立つ！
  通常、Vue.jsはオブジェクトや配列のプロパティの変更をトップレベルでしか監視しない
  →このオプションを使用するとネストされたプロパティの変更も検知することができる✨

const state = reactive({
  user: {
    name: 'John',
    age: 30,
    address: {
      city: 'Tokyo',
      country: 'Japan'
    }
  }
})

watch(
  () => state.user,
  (newValue, oldValue) => {
    console.log('User info changed:', newValue);
  },
  { deep: true }
)

// state.user.address.city の変更を監視
state.user.address.city = 'Osaka'

→コンソールに 'User info changed:' というログが出力される

つまり、{ deep: true }オプションを使用することでstate.userオブジェクト内のaddress.cityプロパティの変更も検知することができるようになる

■結果：watch()推奨

watchEffect()を使用するメリット：
コールバック内で使用される全てのリアクティブ変数を自動的に追跡するため、設定がシンプルになる
→意図しない処理が行われてしまう可能性がある

結論
監視対象を明示的に指定するため、コードの予測可能性が高まり、意図しない処理が実行されるリスクを回避できるwatch()を推奨！

■おわりに

ここまで読んでくださりありがとうございます🙇🏻‍♀️
もしwatch()、watchEffect()のどちらを使用したらいいのか迷った際は、watch()を試してみてください！