AngularJS $ watch vs $ watchCollection: Was ist besser für die Leistung?

Für die Beobachtung eines Objekts Gültigkeitsbereich variable, ist $scope.$watch mit objectEquality auf true gesetzt ODER $scope.$watchCollection besser?

Für eine $scope object-variable (wie 15 Attribute, einige geschachtelte 2 Ebenen tief) aktualisiert, mit Eingabe-Elementen und - ng-model in der Ansicht, wie schlimm ist $scope.$watch mit objectEquality eingestellt true? Ist das eine große Sache zu vermeiden?

Ist $watchCollection eine bessere Lösung?

Ich bin auf der Suche nach einfachen Gewinne zur Verbesserung der Leistung auf meinem AngularJS-App (ich bin immer noch nicht auf 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 ...

InformationsquelleAutor der Frage wbeange | 2014-10-23

  1. 36

    Den $watchCollection() Funktion ist eine Art Mittelweg zwischen den
    zwei $watch() Konfigurationen vor. Es ist mehr in die Tiefe gehen, als die
    Vanille $watch() Funktion, aber es ist nicht annähernd so teuer wie die
    tief-Gleichheit $watch() Funktion. Wie die $watch() Funktion, die
    $watchCollection() funktioniert durch das vergleichen von physikalischen Objekt-Referenzen;
    doch im Gegensatz zu den $watch() Funktion, die $watchCollection() geht
    eine Ebene tief und führt eine zusätzliche, flache Referenz zu überprüfen
    die top-level-Elemente in der Auflistung.

    siehe diese Erklärung

    InformationsquelleAutor der Antwort Narek Mamikonyan

  2. 164

    $watch() wird ausgelöst durch:

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

    $watchCollection() wird ausgelöst, indem alles obige UND:

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

    $watch(..., true) wird ausgelöst, indem ALLES obige UND:

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

    NUR NOCH EINS...

    $watch() ist der einzige, der feuert, wenn ein array durch eine andere ersetzt, mit exakt demselben Inhalt. Zum Beispiel:

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

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

$scope.myArray = newArray;

    Unten ist ein link zu einem Beispiel JSFiddle, verwendet all die verschiedenen watch-Kombinationen und-Ausgänge protokollieren von Nachrichten, um anzugeben, welche "Uhren" ausgelöst wurden:

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

    InformationsquelleAutor der Antwort Luis Perez

  3. 2

    $watchCollection ist optimiert für Vektor arrays [] wo die Elemente können push

    sowie $watch ist gut für assoziative arrays, Objekte {}

    $watchCollection aber nicht Wachen wirst, die für die Tiefe ändert, ist wie die Uhr mit objectEquality auf false gesetzt.

    Wenn Sie bereits wissen, die Struktur der Tiefe, die Sie optimieren können, wie diese:

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

    InformationsquelleAutor der Antwort Mihai Nistor

Schreibe einen Kommentar