リスナー
ウォッチャー（Watcher）は、ofa.jsにおいてデータの変化を監視し、対応するロジックを実行する機能です。リアクティブデータが変化すると、ウォッチャーは自動的にコールバック関数をトリガーし、データ変換、副作用の操作、非同期処理などのタスクを実行できます。
基本的な使い方
ウォッチャーはコンポーネントの watch オブジェクト内に定義され、キー名は監視するデータプロパティ名に対応し、値はデータが変化したときに実行されるコールバック関数です。
count:{{count}}
doubleCount:{{doubleCount}}
コールバック関数のパラメータ
リスナーコールバック関数は2つのパラメーターを受け取ります：- newValue：変化後の新しい値
{watchers}：現在のコンポーネントのすべてのウォッチャーオブジェクト
データ変更後は、まずデバウンス処理が実行され、その後 watch 内のコールバックが実行されます。watchers パラメータは、今回のデバウンス周期内でマージされたすべての変更の集合です。
watch 内の関数はコンポーネントの初期化完了直後に呼び出され、データ監視を確立するために使用されます。watchers の長さがあるかどうかを判断することで、初回呼び出しかどうかを区別できます。
名前: {{name}}
年齢: {{age}}
{{log}}
深層リスニング
オブジェクトや配列型のネストされたデータに対して、watch 内では自動的に深い監視が行われます。
ユーザー情報:
名前: {{user.name}}
年齢: {{user.age}}
趣味: {{user.hobbies.join(', ')}}
複数のデータソースを監視する
複数のデータの変化を同時に監視し、コールバック関数内でそれらの変化に応じて適切なロジックを実行することができます。
幅: {{rectWidth}}
高さ: {{rectHeight}}
面積: {{area}}
実際の応用シーン
1. フォーム検証
{{usernameError}}
{{emailError}}
2. テーマの設定
設定: {{settings.theme}}
保存状態: {{saveStatus}}
注意事項
- 監視対象データの変更を避ける：ウォッチャーのコールバック内で監視対象データを変更すると、無限ループが発生する可能性があります。変更が必要な場合は、適切な条件判断を必ず行ってください。
- 代わりに算出プロパティを使用する：複数のデータの変化に基づいて新しい値を計算する必要がある場合は、ウォッチャーではなく算出プロパティを使用することを推奨します。