AngularJS $watch 与 $watchCollection：性能哪个更好？

Question

对于观察对象范围变量，$scope.$watch 和 objectEquality 设置为 true 还是 $scope.$watchCollection 更好？

对于使用输入元素和视图中的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

$watchCollection() 函数是介于 以上两个$watch() 配置。比这个更深入 原版 $watch() 函数；但是，它并不像 深度平等$watch() 函数。与$watch() 函数一样， $watchCollection() 通过比较物理对象引用来工作； 但是，与 $watch() 函数不同，$watchCollection() 是 一级深度并执行额外的、浅层的参考检查 集合中的顶级项目。

see this explanation

Answer 2

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

Answer 3

$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 的链接，它使用所有不同的监视组合并输出日志消息以指示触发了哪些“监视”：

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