vue3watch と vue2watch には API レベルでいくつかの違いがあります。
- メソッドの呼び出し: vue2 では、$watch() メソッドを使用してデータ変数を監視します。vue3 では、watch() 関数を使用して同じ効果を実現します。
- 配列とオブジェクトを監視する: vue2 では、オプション deep:true を設定して、オブジェクトまたは配列の変更を詳細に監視します。ただし、この方法ではパフォーマンスの問題が発生する可能性があります。vue3 では、新しい ref とリアクティブ API を使用して、オブジェクトと配列の監視をより適切にサポートできます。
- 監視のキャンセル: vue2 では、unwatch() メソッドを返して監視をキャンセルします。vue3 では、同じ操作を完了するために呼び出すことができる stop() 関数を返します。
- 最初のトリガー: vue2 では、リスナーのコールバック関数をトリガーするには、immediate:true オプションが必要です。vue3 では、コールバック関数を非同期で実行する場合 (たとえば、最初のレンダリング後)、オプション Lazy を true に設定し、トリガーを使用してコールバック関数を強制的に実行できます。
上記の変更に加えて、Vue 3 の watch() はデバッグ ツールもサポートしており、Vue 2 の動作方法と比較してコードのパフォーマンスを最適化することが容易になっています。