AngularJS $watch 与 $watchCollection:哪个对性能更好? [英] AngularJS $watch vs $watchCollection: which is better for performance?

问题描述

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

For watching an object scope variable, is $scope.$watch with objectEquality set to true OR $scope.$watchCollection better?

对于一个 $scope 对象变量(比如 15 个属性，一些嵌套 2 层深)更新了输入元素和视图中的 ng-model，$scope.$watch 将 objectEquality 设置为 true?这是要避免的大事吗?

For a $scope object variable (like 15 attributes, some nested 2 levels deep) updated with input elements and ng-model in the view, how bad is $scope.$watch with objectEquality set to true? Is this a big thing to avoid?

$watchCollection 是更好的解决方案吗?

Is $watchCollection a better solution?

我正在寻找简单的胜利来提高我的 AngularJS 应用程序的性能(我仍然停留在 v1.2.2).

I am looking for easy wins to improve performance on my AngularJS App (I'm still stuck on 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 ...  

推荐答案

$watchCollection() 函数是上面的两个 $watch() 配置.比上面的更深入香草 $watch() 函数；但是，它几乎没有那么贵深度相等 $watch() 函数.与 $watch() 函数一样，$watchCollection() 通过比较物理对象引用来工作；然而，与 $watch() 函数不同的是，$watchCollection()一层深，并执行额外的浅层参考检查集合中的顶级项目.

The $watchCollection() function is a sort-of mid-ground between the two $watch() configurations above. It's more in-depth than the vanilla $watch() function; but, it's not nearly as expensive as the deep-equality $watch() function. Like the $watch() function, the $watchCollection() works by comparing physical object references; however, unlike the $watch() function, the $watchCollection() goes one-level deep and performs an additional, shallow reference check of the top level items in the collection.

查看此说明

这篇关于AngularJS $watch 与 $watchCollection:哪个对性能更好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！