Angularjsで$ watchをマスターします

コアポイント

• AngularJSの$watch関数は、可変値または式の変化を観察するための強力なツールです。変更が検出されると、監視された変数が変更されるたびに実行されるコールバック関数をトリガーします。
• $watch比較のためにJavaScriptの平等演算子（===）を使用します。新しい値が古い値と異なる場合、コールバック関数がトリガーされます。ただし、デフォルトでは、$watchは参照等式のみをチェックすることに注意する必要があります。つまり、コールバック関数は、監視された変数に新しい値が割り当てられている場合にのみトリガーされます。
• AngularJSは、それぞれ同じコールバック関数を持つ複数のモニターまたは監視配列またはオブジェクトをセットアップするための便利なショートカットとして$watchGroupおよび$watchCollectionを提供します。ただし、これらの方法は浅い監視のみを実行し、参照の変更にのみ反応します。
特に複数の変数で
• を使用すると、すべての監視された変数の変更を各要約サイクルについてチェックする必要があるため、パフォーマンスに影響を与える可能性があります。開発者は、状況に応じて$watchまたは$watchGroupの使用を検討するか、監視された変数の数を制限してパフォーマンスを改善する必要があります。 $watchCollection

この記事はマーク・ブラウンによってレビューされました。 SetePointコンテンツを最高に獲得してくれたSetePointのすべてのピアレビューアに感謝します！ AngularJSは、3つの異なる「監視」メソッドを使用して、パブリッシュサブスクライブモードを使用するためのさまざまなオプションを提供します。各メソッドは、その動作を変更するためにオプションのパラメーターを使用します。

に関する公式の文書は、網羅的なものとはほど遠いものです。結局のところ、これはAngularjs V1全体を悩ませる問題です。進行方法を説明するオンラインリソースでさえ、せいぜい断片化されています。

したがって、最終的には、開発者が特定の状況に適したアプローチを選択することは困難です。これは、Angularjsの初心者に特に当てはまります！結果は驚くべきか予測不可能である可能性があり、必然的にエラーにつながります。 $watch この記事では、AngularJSの概念に精通していると仮定します。レビューする必要があると思われる場合は、

、バインディング、

および

について読む必要がある場合があります。

$scope$applyあなたの理解を確認してください$digest

たとえば、アレイの最初の要素を監視する最良の方法は何ですか？スコープで配列を宣言するとします

• 配列に要素を追加すると、コールバック関数をトリガーしますか？ $scope.$watch('letters', function () {...});
最初の要素を変更すると、発砲しますか？
• はどこですか？それは同じように機能しますか、それともより良いですか？ $scope.$watch('letters[0]', function () {...}); 上記の上記、配列要素は元の値です。最初の要素を同じ値に置き換えた場合はどうなりますか？
• 次に、配列にオブジェクトが含まれていると仮定します。何が起こるのですか？
• 、
• 、$watchの違いは何ですか？ $watchCollection $watchGroup
これらすべての質問に混乱している場合は、読み続けてください。私の目標は、いくつかの例を使用して、できるだけ明確に説明することで、プロセスを説明することです。

$scope.$watch

から始めましょう。すべての時計機能のコアは次のとおりです。私たちが見る他のすべての方法は、

の便利なショートカットです。 $scope.$watch $watch

を使用します $watch Angularの利点は、同じメカニズムを明示的に使用して、コントローラーのデータ変更によってトリガーされる複雑な操作を実行できることです。たとえば、以下に応じて変更できる特定のデータのモニターをセットアップできます。

タイムアウト

ui
Webワーカーによって実行される複雑な非同期計算
ajax call
4. 原因が何であれ、データの変更を処理するために1つのリスナーのみを設定できます。

しかし、これを行うには、

自分で電話する必要があります。

実用操作$scope.$watch

のコードを見てみましょう。

これはその署名です：$rootscope.watch()。

詳細には、その4つのパラメーター：function(watchExp, listener, objectEquality, prettyPrintExpression)

監視された式。それは関数または文字列である可能性があり、すべてのダイジェストサイクルで評価されます。

1. ここで注意すべき重要な側面は、watchExp

   式が関数として評価されている場合、関数は等である必要があることです。言い換えれば、同じ入力セットについては、常に同じ出力を返す必要があります。そうでない場合、Angularは監視されたデータが変更されたと仮定します。これは、違いを検出し続け、ダイジェストサイクルの各反復でリスナーを呼び出すことを意味します。

モニターが最初にセットアップされたときに起動されるコールバック関数、そして要約サイクル中に
2. 値の変更が検出されるたびに。設定時の最初の呼び出しは、式の初期値を保存することを目的としています。

   listener watchExp

この値が真である場合にのみ、モニターは深度比較を実行します。それ以外の場合、浅い比較、つまり比較参照のみを実行します。

3. 例として配列を取りましょう objectEquality

   は、

   フィールドの再割り当てのみがリスナーを呼び出されることを意味します。 $scope.fruit = ["banana", "apple"]また、「深い」深さがどれほど深いかを確認する必要があります。これについては後で説明します。

4. 渡された場合、監視式をオーバーライドします。このパラメーターは、prettyPrintExpressionの通常の呼び出しで使用することを意図していません。 $watch()

   注意：あなた自身が見ることができるように、4番目のパラメーターが誤って渡された場合、予期しない結果は予期しない結果になりやすいです。

今度は、紹介の質問のいくつかに答えます。このセクションの例をご覧ください：

CODEPEN例

行動の違いを直接比較することができます。

監視配列

では、スコープ上の配列を監視して変更を加える必要がありますが、「変更」とはどういう意味ですか？

コントローラーが次のように見えるとします：

<code class="language-javascript">app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);</code>

1つのオプションは、次のような呼び出しを使用することです。

上記のコールバックでは、

および

<code class="language-javascript">$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});</code>

が自明の意味を持ち、

サイクルがそれを呼び出すたびに更新されます。現在の範囲への参照を保持しているため、newValueの意味も直感的です。 oldValue $digestしかし、キーは次のとおりです。このリスナーはいつ呼び出されますか？実際、何も起こらずに配列内の要素を追加、削除、交換することができます。これは、デフォルトでは、scopeが

参照等式

のみが必要であると想定しているため、コールバック関数は新しい値をlettersに割り当てるときにのみトリガーされるためです。 $watch 配列の任意の要素の変更に対してアクションを実行する必要がある場合は、3番目のパラメーターとして（つまり、上記のオプション$scope.lettersパラメーターの値として）を渡す必要があります。

trueサーベイランスオブジェクトwatch objectEqualityオブジェクトの場合、状況は変わりません。

がfalseの場合、そのスコープ変数への再割り当てを監視するだけで、Trueの場合、オブジェクトの要素が変更されるたびにコールバック関数がトリガーされます。

<code class="language-javascript">$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
}, true);</code>

監視配列の最初の要素

objectEqualityを使用して配列を監視することにより、コールバック関数がトリガーされるたびに、

および

が配列全体の古い値と新しい値になることに注目する価値があります。したがって、実際に何が変化するかを理解するには、それらを互いに比較する必要があります。

アレイの最初の要素（または4番目の要素 - 同じ原理）の変更にのみ興味があるとします。 Angularは優れているため、これを行うことができます。最初の議論としてobjectEquality === trueに渡された表現で自然な方法でそれを表現することができます：newValue oldValue

配列に2つの要素しかない場合はどうなりますか？問題ありません。4番目の要素を追加しない限り、コールバック関数は起動しません。 OK OK、技術的には、モニターをセットアップしたときに発射し、次に4番目の要素を追加したときにのみ発生します。

oldValueを記録すると、どちらの場合も未定義になることがわかります。これを既存の要素を監視するときに起こることと比較してください。セットアップの場合でも、oldValue == undefinedがあります。したがって、$watch処理できません！

もっと興味深い質問：ここで合格する必要がありますか？ objectEquality === true

短い答え：申し訳ありませんが、短い答えはありません。

それは本当に依存しています：

この例では、元の値に取り組んでいるため、深さの比較は必要ありません。そのため、

を省略できます。
• objectEqualityしかし、たとえば
など、マトリックスがあるとします。その後、
• のような割り当てが変更されたら、アラートを取得することをお勧めします。 $scope.board = [[1, 2, 3], [4, 5, 6]] $scope.board[0][1] = 7 オブジェクトの監視フィールド

アレイ内の要素を監視するよりも便利な場合、オブジェクトの任意のフィールドを監視できます。しかし、それは驚くことではありませんよね？結局のところ、javaScriptの配列

は

オブジェクトです。

深さはどれくらいですか？

<code class="language-javascript">app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);</code>

この時点では、最後に重要な詳細を明確にする必要があります。各フィールドが非プリミティブ値である複雑なネストされたオブジェクトを監視する必要がある場合はどうなりますか？たとえば、ツリーまたはグラフ、またはJSONデータのみ。

チェックしましょう！

まず、監視するオブジェクトが必要です：

オブジェクト全体のモニターをセットアップしましょう。これまでのところ、この場合

を

<code class="language-javascript">$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});</code>

に設定する必要があることは明らかだと思います。

objectEquality true問題は次のとおりです。

のような割り当てが発生した場合、Angularは私たちに知らせるのに十分親切ですか？

<code class="language-javascript">$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
}, true);</code>

答えは次のとおりです。はい、幸運なことに、それは（以前のCodepenデモで参照してください）。 $scope.b.bb[1].bb2a = 7;

その他の方法

$scope.$watchGroupそれは本当に違うアプローチですか？答えはノーです、そうではありません。

$watchGroup()は、同じコールバック関数を使用して複数のモニターをセットアップし、

の配列を渡すことができる便利なショートカットです。

$watchGroup()各渡された式は、標準watchExpressionsメソッドを使用して監視されます。

$scope.$watch()

、

<code class="language-javascript">$scope.$watch('letters[4]', function (newValue, oldValue, scope) {
    //...
}, true);</code>

、

を使用すると、変更された値や同じ値を保持している値を含む、式の値のリストを保存することに注意する価値があります。最初のパラメーターでそれらの順序は、配列を渡す順序が同じです。 $watchGroup この方法のドキュメントをチェックした場合、newValuesオプションを取得しないことに気付く場合があります。これは、表現を浅く監視し、参照の変更にのみ反応するためです。 oldValues

以下の$watchGroup()デモを使用する場合、いくつかの微妙さに驚くかもしれません。たとえば、unshiftは、少なくともある程度までリスナーを呼び出されます。これは、式リストを$watchGroupに渡すと、が実行コールバック関数をもたらす式をトリガーするためです。

CODEPEN例 また、

のサブフィールドへの変更は更新を作成しないことに注意してください。更新は、新しい値がBフィールド自体に割り当てられている場合にのみ生成されます。

$scope.obj.b

$scope.$watchCollectionこれは、配列またはオブジェクトを監視するためのもう1つの便利なショートカットです。配列の場合、リスナーは、任意の要素が交換、削除、または追加されたときに呼び出されます。オブジェクトの場合、プロパティが変更された場合。繰り返しになりますが、

は

を許可しないため、要素/フィールドを浅く監視するだけで、サブフィールドの変化に反応しません。 $watchCollection() objectEquality

CODEPEN例

結論

これらの例が、この角度のある機能の力を発見し、適切なオプションを使用することがどれほど重要かを理解するのに役立つことを願っています。

CodePenをコピーして、これらのメソッドをさまざまなコンテキストで使用してみてください。コメントセクションにフィードバックを残すことを忘れないでください。

この記事で説明した概念のいくつかをもっと詳しく見たい場合は、さらに読むためのいくつかの提案があります。

angularjs scope

Angular's
1. および
2. を理解してください JavaScriptイベント処理における新しいパターン$apply() AngularJSスコープ$digest()のプロトタイプ継承
3. などのドキュメント
5. faq（faq）$watch
ingularjs

$watchAngularjsの主な目的は何ですか？

AngularJSの

関数は、主に変数または式の値の変化を観察するために使用されます。これは、変数または式の値の変化を監視するためのAngularJSスコープされたオブジェクトの一部です。変更が検出されると、$watch関数は、監視された変数が変更されるたびに実行されるコールバック関数をトリガーします。

$watchどのように機能しますか？ $watch AngularJSの

関数は、監視された変数または式の古い値と新しい値を比較することにより機能します。比較のためにJavaScriptの平等演算子（===）を使用します。新しい値が古い値と異なる場合、

関数はコールバック関数をトリガーします。 $watch

angularjsで

を使用するにはどうすればよいですか？ $watch $watch angularjsで

を使用するには、スコープオブジェクトの

メソッドを呼び出して、監視する変数または式の名前、および監視されている変数がコールバックを監視するときに発生する2つのパラメーターを渡す必要があります。変更時に実行される機能。例は次のとおりです。$watch

<code class="language-javascript">app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);</code>

Angularjsの

$watchとの違いは何ですか？ $apply AngularJSの

関数は変数または式の変化を観察するために使用され、関数は使用されます。それに応じて。通常、$watch関数は、domイベントハンドラーや$apply関数など、Angularjsコンテキストの外側のモデル変更を行うときに使用されます。 $apply setTimeoutを使用してAngularjsの複数の変数を監視できますか？

$watchはい、

を使用して、AngularJSの複数の変数を監視できます。これを行うには、変数名の配列を

関数に渡すことができます。ただし、各ダイジェストサイクルのすべての監視された変数の変更を確認する必要があるため、複数の変数の監視がパフォーマンスに影響を与える可能性があることを忘れないでください。 $watch $watchangularjsの変数の監視を停止するにはどうすればよいですか？ $watch

angularjsの

関数を呼び出すと、ログアウト関数が返されます。この関数を呼び出して、監視変数を停止できます。例は次のとおりです。$watch

angularjsの$watchとは何ですか？

<code class="language-javascript">$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});</code>

angularjsの

関数は、式のセットを監視するために使用されます。これは$watchGroup関数のように機能しますが、複数の監視された式が変更された場合でも、ダイジェストサイクルごとに1回のみコールバック関数をトリガーします。これにより、複数の式を監視するとパフォーマンスが向上します。

angularjsの$watchGroupとは何ですか？ $watch AngularJSの

関数は、アレイのオブジェクトまたは要素の属性を監視するために使用されます。属性や要素が変更される限り、コールバック関数をトリガーしますが、

とは異なり、パフォーマンスを改善できるオブジェクトや配列を深く監視しません。 $watchCollection

angularjsディレクティブで

を使用できますか？ $watchCollection $watchはい、AngularJSディレクティブで

を使用できます。実際、ディレクティブで

を使用して、属性またはスコープ変数の変数の変更に応答することが一般的です。 $watch

angularjsのパフォーマンスに関する考慮事項は、

を使用していますか？ $watch AngularJで$watch

を使用すると、特に多くの変数や式を監視する場合は、パフォーマンスに影響を与える可能性があります。これは、各ダイジェストサイクルのすべての監視された変数の変更を確認する必要があるためです。パフォーマンスを向上させるには、状況に応じて

または$watchの使用を検討するか、監視された変数の数を制限します。

以上がAngularjsで$ watchをマスターしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。