AngularJS $ watch बनाम $ watchCollection: जो प्रदर्शन के लिए बेहतर है?




angularjs-scope angularjs-watch (2)

$watchCollection() फ़ंक्शन दो $watch() कॉन्फ़िगरेशन के बीच के मध्य का एक प्रकार है। यह वेनिला $ वॉच () फ़ंक्शन की तुलना में अधिक गहराई से है; लेकिन, यह गहरी-समानता $watch() फ़ंक्शन जितना महंगा नहीं है। $watch() फ़ंक्शन की तरह, $watchCollection() भौतिक ऑब्जेक्ट संदर्भों की तुलना करके काम करता है; हालांकि, $watch() फ़ंक्शन के विपरीत, $watchCollection() संग्रह में शीर्ष स्तर के आइटम का एक अतिरिक्त, उथला संदर्भ चेक करता है, एक स्तर गहरा होता है।

इस स्पष्टीकरण को देखें

ऑब्जेक्ट स्कोप वैरिएबल देखने के लिए, $scope.$watch ऑब्जेक्ट $scope.$watch साथ $scope.$watch सत्य या $scope.$watchCollection सेट है $scope.$watchCollection बेहतर है?

$scope ऑब्जेक्ट चर (15 विशेषताओं की तरह, कुछ नेस्टेड 2 स्तर गहरे) इनपुट तत्वों और दृश्य में ng-model साथ अपडेट किया गया, $scope.$watch कितनी खराब है $scope.$watch वस्तु वस्तु वस्तु true साथ सेट होती true ? क्या इससे बचना बड़ी बात है?

$watchCollection एक बेहतर समाधान है?

मुझे अपने AngularJS App पर प्रदर्शन में सुधार के लिए आसान जीत की तलाश है (मैं अभी भी 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 वेक्टर arrays [] लिए अनुकूलित है जहां तत्वों को धक्का दिया जा सकता है

और $watch सहयोगी सरणियों वस्तुओं के लिए अच्छी है {}

$watchCollection गहराई में बदलाव के लिए नहीं देखेगा, यह वॉच ऑब्जेक्ट की तरह है, जिसमें ऑब्जेक्ट को झूठी के साथ सेट किया गया है।

यदि आप पहले से ही गहराई की संरचना के बारे में जानते हैं तो आप इस तरह का अनुकूलन कर सकते हैं:

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