在 Angular 应用程序中，经常需要在某个值发生变化时更新视图或执行一些操作。Angular 提供了 $watch 这个可以监听变化的方法，但是如果不使用正确的姿势，它可能会导致性能问题或者不必要的代码复杂度。本文将介绍 Angular 中 $watch 的正确使用方式，以便能够更加有效地使用它。
$watch 方法的实现原理
在介绍 $watch 的使用方式之前，先来了解一下它的实现原理。$watch 在 Angular 内部是通过一个叫做 digest cycle（脏检查循环）的机制来实现的。digest cycle 会循环检查所有通过 $watch 监听的值是否发生了变化，如果发生了变化，则会触发对应的回调函数。
因为 digest cycle 需要循环检查所有的 $watch，所以当 $watch 数量过多时，它会对应用程序的性能产生负面影响。因此，正确使用 $watch 能够避免这种情况的发生。
$watch 的正确使用方式
以下是在 Angular 中使用 $watch 的正确姿势。
1. 使用 $watch 检测值的变化
可以使用 $watch 方法来监听一个变量的值的变化。当被监视的变量发生了变化，会在回调函数中触发相应的操作。例如：
$scope.$watch('name', function(newValue, oldValue) {
console.log('name has changed from ' + oldValue + ' to ' + newValue);
});在上面的代码中，$scope 是一个 Angular 控制器范围内的对象。$scope.$watch 中第一个参数是需要监视的变量名（字符串类型），第二个参数是变量发生变化时的回调函数。
2. 使用 $watchCollection 监控数组和对象
如果需要监听一个数组或对象的变化，可以使用 $watchCollection 方法，此方法会在数组或对象的改变时触发回调函数，但并不会检查数组或对象中元素的变化。例如：
$scope.array = [1, 2, 3];
$scope.$watchCollection('array', function(newArray, oldArray) {
console.log('array has changed from', oldArray, 'to', newArray);
});3. 使用 $watch 时避免无限循环
在使用 $watch 时，需要避免出现无限循环的情况。出现无限循环的原因是在监测变量时引入了新的改变，而这个改变又会触发一个更改，从而导致无限循环。为了避免无限循环，可以使用第三个参数来设置深度监听：
$scope.$watch('foo', function(newValue, oldValue) {
console.log('foo has changed from', oldValue, 'to', newValue);
}, true);在上面的代码中，第三个参数为 true，表示将会深度监听变量的改变，如果变化是深层次的，也会被检查到。
4. 使用 $watchGroup 监听一组变量
如果需要监听一组变量，可以使用 $watchGroup 方法，此方法可以同时监测多个变量的变化。例如：
$scope.$watchGroup(['name', 'age'], function(newValues, oldValues) {
console.log('name and age has changed from', oldValues, 'to', newValues);
});在上面的代码中，$watchGroup 监听了 $scope 中的 name 和 age 两个变量。当它们的值发生变化时，相应的回调函数就会被触发。
总结
$watch 是 Angular 内部常用的方法，它能够监听变量的变化并触发相应的操作。但是，如果不使用正确的姿势，它可能会导致性能问题或者不必要的代码复杂度。以上介绍的是在 Angular 中正确使用 $watch 的方式，应该帮助读者更好的使用它，提高代码的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653729977d4982a6ebf8eddd