AngularJS $看VS $ watchCollection：这是更好的性能？ [英] AngularJS $watch vs $watchCollection: which is better for performance?

问题描述

有关观看对象范围变量，则$ $范围。看与 objectEquality 设置为true或 $范围。$ watchCollection 更好？

对于一个范围对象变量（如15属性，一些嵌套2级深）与视图中输入元素和NG-模型更新，是多么糟糕$ $范围。看与 objectEquality 设置为真正？这是为了避免大的事？

是 $ watchCollection 一个更好的解决方案？

我要寻找轻松获胜，以提高自己的AngularJS应用程序的性能（我仍然停留在V1.2.2）。

  // CTRL范围变种
  $ scope.filters = {
    名称： ''，
    信息：{测试：''，富：''，栏：''}，
    是的：''
    //等等...
  }  // CTRL看？
  $范围。$表（过滤器，功能（的newval，OLDVAL）{
    如果（的newval！== OLDVAL）{
      //使用更新的过滤器调用
    }
  }，真正的）;  //或者ctrl腕表系列？
  $范围。$ watchCollection（过滤器，功能（的newval，OLDVAL）{
    如果（的newval！== OLDVAL）{
      //使用更新的过滤器调用
    }
  }）;  //与NG-模型视图输入
  ＆LT;输入类型=文本NG模型=filters.name/＆GT;
  ＆LT;输入类型=文本NG模型=filters.info.test/＆GT;
  ＆LT;输入类型=文本NG模型=filters.yep/＆GT;
  //等等...
 

解决方案

  

的 $ watchCollection（）功能是排序的之间地中旬
  两个 $以上的手表（）配置。它的更深入的比
  香草手表$（）函数;但是，它不是几乎一样的昂贵
  深平等 $表（）功能。像 $表（）功能，
   $ watchCollection（）的工作原理是比较物理对象的引用;
  然而，不同于手表$（）函数中， $ watchCollection（）进入
  一级深度和执行额外的浅参考检查
  集合中的顶级项目。

看到这样的解释

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

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?

Is $watchCollection a better solution?

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 ...  

解决方案

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.

see this explanation

这篇关于AngularJS $看VS $ watchCollection：这是更好的性能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！