Разница между этими часовыми методами в angularJS?

Ответ 1

См. "Глубины $Scope $watch" в https://docs.angularjs.org/guide/scope. Внутри есть особенно полезная графика:

Ориентация на свойство $scope, которое является объектом с параметрами Array (если я правильно понял вопрос), я продемонстрировал несколько различных конфигураций $watcher в нижеприведенном фрагменте, чтобы вы могли видеть различные действия в действии.

(function() {
  "use strict";

  angular.module('myApp', [])
    .controller("Controller1", ['$scope', Controller1]);

  function Controller1($scope) {
    var _objWithArrayProps = {
        'prop1': [],
        'prop2': [],
        'prop3': []
      },
      _counts = {
        'watchNoObjEquality': -1, //watchers to -1 since they fire once upon initialisation
        'watchPropNoObjEquality': -1,
        'watchObjEquality': -1,
        'watchFunctionNoObjEquality': -1,
        'watchFunctionObjEquality': -1,
        'watchCollection': -1,
        'watchCollectionFunction': -1,
        'clicks': 0
      };

    $scope.data = {
      'objWithArrayProps': _objWithArrayProps,
      'counts': _counts
    };

    $scope.$watch('data.objWithArrayProps', watchNoObjEquality);
    $scope.$watch('data.objWithArrayProps.prop1', watchPropNoObjEquality);
    $scope.$watch('data.objWithArrayProps', watchObjEquality, true);
    $scope.$watch(watchFunction, watchFunctionNoObjEquality);
    $scope.$watch(watchFunction, watchFunctionObjEquality, true);
    $scope.$watchCollection('data.objWithArrayProps', watchCollection);
    $scope.$watchCollection(watchFunction, watchCollectionFunction);

    $scope.addProperty = addProperty;
    $scope.addArrayElements = addArrayElements;
    $scope.modifyProperties = modifyProperties;
    $scope.modifyArrayElements = modifyArrayElements;

    function watchNoObjEquality(newVal, oldVal) {
      _counts.watchNoObjEquality++;
    }

    function watchPropNoObjEquality(newVal, oldVal) {
      _counts.watchPropNoObjEquality++;
    }

    function watchObjEquality(newVal, oldVal) {
      _counts.watchObjEquality++;
    }

    function watchFunction() {
      return _objWithArrayProps; // same as: return $scope.data.objWithArrayProps;
    }

    function watchFunctionNoObjEquality(newVal, oldVal) {
      _counts.watchFunctionNoObjEquality++;
    }

    function watchFunctionObjEquality(newVal, oldVal) {
      _counts.watchFunctionObjEquality++;
    }

    function watchCollection(newVal, oldVal) {
      _counts.watchCollection++;
    }

    function watchCollectionFunction(newVal, oldVal) {
      _counts.watchCollectionFunction++;
    }

    var _propNameNumberSuffix = 4; //for naming properties incrementally
    function addProperty() {
      _counts.clicks++;
      _objWithArrayProps['prop' + _propNameNumberSuffix] = [];
      _propNameNumberSuffix++;
    }

    function addArrayElements() {
      _counts.clicks++;
      for (var prop in _objWithArrayProps) {
        if (_objWithArrayProps.hasOwnProperty(prop)) {
          _objWithArrayProps[prop].push('x');
        }
      }
    }

    function modifyProperties() {
      _counts.clicks++;
      for (var prop in _objWithArrayProps) {
        if (_objWithArrayProps.hasOwnProperty(prop)) {
          _objWithArrayProps[prop] = [Math.random()]; //set to a fresh array with a random number in it
        }
      }
    }

    function modifyArrayElements() {
      _counts.clicks++;
      for (var prop in _objWithArrayProps) {
        if (_objWithArrayProps.hasOwnProperty(prop)) {
          //ensure we have at least one item in array(s)
          if (!_objWithArrayProps[prop].length) {
            _objWithArrayProps[prop].push('x');
          }

          for (var i = 0, iLen = _objWithArrayProps[prop].length; i < iLen; i++) {
            _objWithArrayProps[prop][i] = Math.random().toFixed(4);
          }
        }
      }
    }

  }

})();

body {
  font-family: "Arial", "sans-serif";
  font-size: 0.8em;
}
h1 {
  font-size: 1.4em;
}
pre {
  margin: 0;
}
pre code {
  display: block;
  background-color: #eee;
  padding: 5px;
  max-height: 200px;
  overflow: auto;
}
ul.tab li span {
  display: inline-block;
  margin: 5px 0;
}
ul.tab li {
  border-bottom: 1px dashed #ddd;
  display: block;
  padding: 0;
}
ul.tab {
  padding: 0;
}
#data,
#counts {
  width: 45%;
  display: inline-block;
  vertical-align: top;
  margin: 2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Controller1">
  <h1>Object with Array properties</h1>
  <div id='counts'>
    <strong>Watcher fired count:</strong>
    <ul class="tab">
      <li><span><strong>$watch</strong>('objWithArrayProps', ...) :</span> {{data.counts.watchNoObjEquality}}</li>
      <li><span><strong>$watch</strong>('objWithArrayProps.prop1', ...) :</span> {{data.counts.watchPropNoObjEquality}}</li>
      <li><span><strong>$watch</strong>('objWithArrayProps', ..., true) :</span> {{data.counts.watchObjEquality}}</li>
      <li><span><strong>$watch</strong>(function() {...}, ...) :</span> {{data.counts.watchFunctionNoObjEquality}}</li>
      <li><span><strong>$watch</strong>(function() {...}, ..., true) :</span> {{data.counts.watchFunctionObjEquality}}</li>
      <li><span><strong>$watchCollection</strong>('objWithArrayProps', ...) :</span> {{data.counts.watchCollection}}</li>
      <li><span><strong>$watchCollection</strong>(function() {...}, ...) :</span> {{data.counts.watchCollectionFunction}}</li>
    </ul>
    <strong>Button clicks:</strong> {{data.counts.clicks}}
  </div>
  <div id='data'>
    <pre><code>{{data.objWithArrayProps | json}}</code></pre>
  </div>
  <button ng-click="addProperty()">Add a property</button>
  <button ng-click="addArrayElements()">Add array elements</button>
  <button ng-click="modifyProperties()">Modify properties</button>
  <button ng-click="modifyArrayElements()">Modify array elements</button>
</div>

Ответ 2

Процитировать мой ответ от здесь, в котором OP никогда не принимал ответа..

$watchCollection будет отображаться мелкие объекты на одном объект и уведомить вас, если один из них изменится.

$watchGroup однако наблюдает за группой отдельных выражений часов.

Они не являются функционально эквивалентными. $watchGroup можно использовать, когда вы хотите посмотреть множество выражений, которые все должны ответить к одному обратному вызову - это могут быть индивидуальные выражения, которые нацеливать разные объекты. Это можно использовать для просмотра 'foo', 'foo.bar' и 'baz.qux'. Это 3 разные цели - foo, foo bar и свойство baz qux, но все они будут делегат к тому же обработчику.

В отличие от $watchCollection будет отображаться только мелкий объект. Это делает его лучше для объекта, который может изменить его свойств (например, наш собственный $scope). В сохранении с примерами нашего мусора, чтобы достичь того же, что и выше, вы бы только хотите смотреть foo и baz, но вы будете уведомлены о любых изменения в foo и baz (в отличие от того, чтобы быть уведомленным только для изменяется на foo, foo.bar и baz.qux.

Ответ 3

$watchGroup предоставляется в версии 1.3 angular.

Если вы используете более старую версию:

$scope.$watch(function() {
    return JSON.stringify(array);
}, function() {
});

Конечно, вы должны добавить try/catch. О производительности: если вам нужно смотреть такие сложные данные, я думаю, что это решение будет иметь одинаковую производительность. В любом случае тестовый тестовый тест...