Question

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

对于在视图中使用输入元素和$scope更新的ng-model对象变量（如15个属性，一些嵌套的2级深度），$scope.$watch与{{1}的差异有多大设置为objectEquality？这是一件要避免的事吗？

true是更好的解决方案吗？

我正在寻找轻松获胜以提高我的AngularJS App的性能（我仍然坚持使用v1.2.2）。

$watchCollection

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）将由以上所有内容触发AND：

$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的链接，它使用所有不同的手表组合并输出日志消息来指示哪些＆＃34;观察＆＃34;被触发了：

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

Answer 2

$watchCollection()功能是一种介于两者之间的中间地带上面有两个$watch()配置。它的深度比它更深入 vanilla $ watch（）函数;但是，它并不像它那么贵深度相等$watch()函数。就像$watch()函数一样 $watchCollection()通过比较物理对象引用来工作; 但是，与$watch()函数不同，$watchCollection()会发生一级深度并执行额外的浅参考检查集合中的顶级项目。

see this explanation

Answer 3

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

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

3 个答案: