AngularJS $watch vs $watch Collection: 어떤 것이 퍼포먼스에 더 좋습니까?

AngularJS $watch vs $watch Collection: 어떤 것이 퍼포먼스에 더 좋습니까?

오브젝트 스코프 변수를 감시하기 위해$scope.$watch와 함께objectEqualitytrue OR로 설정하다$scope.$watchCollection더 나은가요?

의 경우$scope오브젝트 변수(예를 들어 15개의 Atribute, 일부 중첩된 2레벨)는 입력 요소로 갱신되며,ng-model보기에는, 얼마나 나쁜가$scope.$watch와 함께objectEquality로 설정하다.true피해야 할 큰 일인가요?

이$watchCollection더 나은 해결책?

Angular의 성능을 향상시킬 수 있는 쉬운 승리를 찾고 있습니다.JS App (아직 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 ...  

$watch()는 다음에 의해 트리거됩니다.

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

$watchCollection()은 위의 모든 AND에 의해 트리거됩니다.

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

그$watchCollection()함수는 둘 사이의 일종의 중간 지점이다.$watch()를 참조해 주세요.vanilla $watch() 함수보다 상세하지만 deep-equality만큼 비싸지는 않습니다.$watch()기능.예를 들면$watch()기능,$watchCollection()물리 오브젝트 참조를 비교하는 것으로 동작합니다만,$watch()기능,$watchCollection()는 1레벨 깊이까지 이동하여 컬렉션의 최상위 항목에 대해 얕은 참조 검사를 수행합니다.

이 설명을 참조해 주세요.

$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
    }
  });

언급URL : https://stackoverflow.com/questions/26535415/angularjs-watch-vs-watchcollection-which-is-better-for-performance