【Vue3】watchの挙動と{ immediate: true }の必要性

はじめに

Vue3に移行する際にwatchの挙動が変わったことに気づいたので備忘録です。

Vue3におけるwatchの変更点

Vue.jsにおけるwatchは、指定したデータやプロパティの変更を監視し、変更があった際に特定のアクションを実行するために使用されます。Vue3では、このwatchの挙動にいくつかの重要な変更が加えられました。特に、コンポーネントのインスタンスが作成された直後の挙動がVue2とは異なり、これが{ immediate: true }オプションを使用するケースを生む原因となっています。

{ immediate: true }オプションの役割

{ immediate: true }オプションは、監視対象のプロパティが初期化された直後、つまりコンポーネントがマウントされる前に、ウォッチャー関数を一度実行するために使用されます。これは、アプリケーションの初期化フェーズで即時に何らかの処理を行いたい場合に特に有用です。

Vue3でのwatch使用例

Vue3におけるwatchの具体的な使用例を以下に示します。

この例では、Count Upがクリックされるたびに計算結果が表示されます。{ immediate: true }オプションのある場合は、セットアップ時にも初期値に対してウォッチャー関数が実行され、アプリケーションの初期状態を適切に設定できます。

まとめ

watchの挙動の変更と{ immediate: true }オプションが必要になるケースについて、お分かりいただけたでしょうか？致命的なバグにはならないかもしれませんが、意図しない挙動にはかなり繋がりそうなので気をつけましょう...