AngularJS $watch 与 $watchCollection : which is better for performance?

Question

对于监视对象作用域变量，将 $scope.$watch 与 objectEquality 设置为 true 还是 $scope.$watchCollection 更好？

对于使用 View 中的输入元素和 ng-model 更新的 $scope 对象变量(如 15 个属性，一些嵌套 2 层深)，$scope.$watch 将 objectEquality 设置为 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 ...  

Answer 1

$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 的链接，该示例使用所有不同的 watch 组合并输出日志消息来指示触发了哪些“ watch ”:

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