角度

[角度]ダーティ値の検出：$ watch、$ watchCollection、$ watchGroup



Dirty Value Detection



使いやすい$ watch

$ watchは、モデルの変更をリッスンし、モデルの一部が変更されたときに通知するスコープ関数です。



$ watch（watchExpression、listener、objectEquality）

各パラメーターの説明は次のとおりです。



watchExpression：リッスンするオブジェクト。'name 'などの角度式、またはfunction（）{return $ scope.name}などの関数を使用できます。

リスナー：watchExpressionが変更されたときに呼び出される関数または式。 newValue（新しい値）、oldValue（古い値）、scope（スコープ参照）の3つの引数を取ります。

objectEquality：ディープリスナーがtrueに設定されている場合、監視対象オブジェクトの各プロパティへの変更をチェックするようにAngularに指示するかどうか。通常の値ではなく、配列の個々の要素またはオブジェクトのプロパティを監視する場合は、それを使用する必要があります。



例えば：

$scope.name = 'hello' var watch = $scope.$watch('name',function(newValue,oldValue, scope){ console.log(newValue + ' - ' + oldValue) }) //Change the value of the name variable after 1 second $timeout(function(){ $scope.name = 'world' },1000)

$ watchの登録を解除する方法

$ watchが多すぎるとパフォーマンスの問題が発生します。$ watchが使用されなくなった場合は、リリースすることをお勧めします。

$ watch関数は、リスナーからログアウトする関数を返します。プロパティを監視して後でログアウトする場合は、次を使用できます。

var counter = 0 var watch = $scope.$watch('name',function(newValue,oldValue, scope){ console.log('new:' + newValue + ' old:' + oldValue) counter ++ / / Exceeded stop logout watch if (counter > 5 ) { watch() } })

$ watchGroup（watchExpressions、リスナー）

watchExpressionsは配列型です

複数の変数を聞きたい場合は、たくさんの時計を書く必要がありますが、これは明らかにあまり良くありません。

$ watchGroupを使用して、同時に複数の変数をリッスンします。変数のいずれかが変更されると、リスナーがトリガーされます。

$scope.teamScore = 0 $scope.time = 0 $scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) { if(newVal[0] > 20){ $scope.matchStatus = 'win' } else if (newVal[1] > 60){ $scope.matchStatus = 'times up' })

総括する：

  1. $ watchGroupの最初の引数が配列に渡され、$ watchCollectionの最初の引数がオブジェクトに渡されます。

  2. モニターオブジェクトと配列、およびモニターレベルは特に深くはありません。最初に$ watchCollectionを使用します。 $ watchCollectionは、配列の挿入と削除を簡単に監視できます。

  3. 複数の変数を同時に監視し、$ watchGroupを使用して同じロジックを実行するには

  4. $ watchの一般的な使用に加えて、データ構造の深さがわかっている場合は、これを直接監視できます。 3番目のパラメータが真の場合、それは深度監視を意味します。ウォッチ変数がより複雑になると、効率が低下します。

転載：https：//www.jianshu.com/p/369185efe516