在 AngularJS 中，我们可以使用 $watch 函数来订阅指定作用域内的属性变化。但是，在某些情况下，我们需要更细粒度的控制，只订阅特定属性的变化。
监听器和表达式
在 AngularJS 中，$watch 函数的第一个参数可以是一个字符串或一个函数。如果是字符串，它表示要监视的表达式，例如：
$scope.$watch('user.name', function(newValue, oldValue) {
// do something when user's name changes
});这个示例将监听 $scope.user 对象中 name 属性的变化，并在变化时执行回调函数。
订阅属性变化
但是，当我们在一个大型的、复杂的应用程序中使用 AngularJS 时，订阅整个对象的变化可能会导致性能问题。幸运的是，AngularJS 提供了一种更好的方法来订阅属性变化：$watchCollection 函数。
与 $watch 不同，$watchCollection 可以传递一个数组或对象，并且只会关注其中某些属性的变化。例如：
$scope.$watchCollection('user', function(newValue, oldValue) {
// do something when user object changes
});
$scope.$watchCollection('user.address', function(newValue, oldValue) {
// do something when user's address changes
});这个示例将监听 $scope.user 对象的变化，并且只会在 user 对象的属性被添加、删除或修改时触发回调函数。第二个示例将监听 user.address 属性的变化。
深层嵌套对象的订阅
当我们需要订阅一个深层嵌套的对象树中某个属性的变化时，我们可以使用 $watch 函数。但是，这种方法不仅效率低下，而且容易出错。
幸运的是，AngularJS 1.2 引入了一个新的函数 $watchGroup，它允许我们同时订阅多个表达式，并在它们中的任何一个发生变化时触发回调函数。例如：
$scope.$watchGroup(['user.name', 'user.address.city'], function(newValue, oldValue) {
// do something when user's name or address city changes
});这个示例将监听 user.name 和 user.address.city 表达式的变化，只要其中任何一个发生变化，就会执行回调函数。
示例代码
<div ng-app="myApp" ng-controller="myCtrl">
<p>Name: {{user.name}}</p>
<p>Address: {{user.address.street}}, {{user.address.city}}</p>
</div>-- -------------------- ---- -------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - -
----- ----- -----
-------- -
------- ---- ---- ----
----- ---------
-
--
------------------------------- ------------------ --------- -
----------------- ------ ---------- ----------
---
-------------------------------- --------------------- ------------------ --------- -
----------------- ---- -- ------- ---- ---------- ----------
---
---结论
在 AngularJS 中，订阅属性变化是一项非常重要的任务。使用 $watch 函数可以订阅整个对象，但不够灵活和高效。相反，AngularJS 提供了 $watchCollection 和 $watchGroup 函数，它们使我们可以更细粒度地控制订阅的属性，从而提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28152