web-dev-qa-db-ja.com

AngularJS $ watch vs $ watchCollection：パフォーマンスにとってどちらが良いですか？

オブジェクトスコープ変数を監視する場合、$scope.$watchobjectEqualityをtrueに設定OR $scope.$watchCollectionより良い？

のために $scopeオブジェクト変数（15個の属性、ネストされた2レベルの深さなど）が入力要素とng-modelビューでは、$scope.$watchobjectEqualityはtrueに設定されていますか？これは避けるべき大きなことですか？

$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 ...
angularjsangularjs-scopeangularjs-watch
40
user12121234

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

この説明を参照

38
Narek Mamikonyan

$ 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";

もう1つ...

$ 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/

180
Luis Perez

$watchCollectionはベクトルarrays []要素はプッシュ可能

および$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
    }
  });
3
Mihai Nistor