45

オブジェクト スコープ変数を監視するには$scope.$watch、withobjectEqualityを true または$scope.$watchCollectionより良いに設定しますか?

$scope入力要素とビューで更新されたオブジェクト変数 (15 個の属性など、ネストされた 2 レベルの深さ) の場合、 set をに設定するとng-modelどの程度悪いでしょうか? これは避けるべき大きなことですか？$scope.$watchobjectEqualitytrue

$watchCollectionより良い解決策はありますか？

AngularJS アプリのパフォーマンスを向上させるための簡単な方法を探しています (まだ v1.2.2 にこだわっています)。

  // ctrl scope var
  $scope.filters = {
    name: '',
    info: {test: '', foo: '', bar: ''},
    yep: ''
    // etc ...
  }

  // ctrl watch ?
  $scope.$watch('filters', function(newVal, oldVal) {
    if(newVal !== oldVal) {
      // call with updated filters
    }
  }, true);

  // or ctrl watch collection ?
  $scope.$watchCollection('filters', function(newVal, oldVal) {
    if(newVal !== oldVal) {
      // call with updated filters
    }
  });

  // view input with ng-model
  <input type="text" ng-model="filters.name" />
  <input type="text" ng-model="filters.info.test" />
  <input type="text" ng-model="filters.yep" />
  // etc ...
4

3 に答える 3

187

$watch()は以下によってトリガーされます:

$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;

$watchCollection()は、上記のすべてによってトリガーされます。

$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value

$watch(..., true)は、上記のすべてによってトリガーされます。

$scope.myArray[0].someProperty = "someValue";

あともう一つだけ...

$watch()は、配列がまったく同じ内容の別の配列に置き換えられたときに発生する唯一のものです。例えば：

$scope.myArray = ["Apples", "Bananas", "Orange" ];

var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");

$scope.myArray = newArray;

以下は、すべての異なる監視の組み合わせを使用し、どの「監視」がトリガーされたかを示すログ メッセージを出力する JSFiddle の例へのリンクです。

http://jsfiddle.net/luisperezphd/2zj9k872/

于 2015-03-21T23:30:45.037 に答える
39

この機能は、上記の 2 つの構成$watchCollection()の中間のようなものです。$watch()通常の $watch() 関数よりも詳細です。ただし、深い等$watch()値関数ほど高価ではありません。$watch()関数 と同様に、は$watchCollection()物理オブジェクト参照を比較することによって機能します。ただし、$watch()関数とは異なり、$watchCollection()は 1 レベル深くなり、コレクション内の最上位アイテムの追加の浅い参照チェックを実行します。

この説明を参照してください

于 2014-10-23T19:06:05.813 に答える
3

$watchCollectionarrays []要素をプッシュできるベクトル用に最適化されています

連想配列オブジェクトに$watch適しています {}

$watchCollection深度の変化を監視しません。objectEquality を false に設定して監視するのと同じです。

深さの構造をすでに知っている場合は、次のように最適化できます。

  // ctrl watch ?
  $scope.$watch('filters', function(newVal, oldVal) {
    if(newVal !== oldVal) {
      // call with updated filters
    }
  });

  // ctrl watch ?
  $scope.$watch('filters.info', function(newVal, oldVal) {
    if(newVal !== oldVal) {
      // call with updated filters
    }
  });
于 2014-12-03T09:49:53.593 に答える