AngularJS 是一款流行的前端 JavaScript 框架，它提供了许多强大的功能以简化 web 应用程序开发。在 AngularJS 中，有两个常用的指令 $watch 和 ng-change，它们都用于检测模型数据的变化并执行相关的操作。但是，这两者之间有什么不同？在什么情况下应该使用哪个指令？
$watch 指令
$watch 是一个 AngularJS 内置服务，用于监视与控制器函数关联的作用域属性的变化。当一个被 $watch 的变量的值发生变化时，它将自动调用回调函数。
下面是一个示例，演示如何使用 $watch 监视作用域中的变量：
<div ng-controller="MyCtrl"> <input type="text" ng-model="data" /> </div>
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.$watch('data', function(newValue, oldValue) {
console.log('New value: ' + newValue);
console.log('Old value: ' + oldValue);
});
});在上面的代码中，我们在控制器中定义了一个名为 data 的变量，并将其绑定到输入框的 ng-model 属性上。我们还使用 $watch 方法来监视该变量的变化，并在每次变化时输出新旧值。
使用 $watch 的优点是它可以监视任意作用域中的变量，并且可以在变量值发生变化时执行自定义操作。然而，由于每个 $watch 都会创建一个新的监视器对象，因此过多的 $watch 可能会导致性能问题。
ng-change 指令
ng-change 是 AngularJS 中的一个指令，用于在绑定到表单元素（如输入框和下拉列表）的 ng-model 属性上的值发生更改时触发回调函数。
下面是一个示例，演示如何使用 ng-change 监听输入框的变化：
<div ng-controller="MyCtrl"> <input type="text" ng-model="data" ng-change="onChange()" /> </div>
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.onChange = function() {
console.log('Value changed to: ' + $scope.data);
};
});在上面的代码中，我们在控制器中定义了一个名为 onChange 的函数，并将其绑定到输入框的 ng-change 属性上。每次输入框的值更改时，该函数都会被调用。
使用 ng-change 的优点是它只有在表单元素的值更改时才会触发回调函数，因此对于特定的表单元素它比 $watch 更高效。但是，它只能监视绑定到表单元素的 ng-model 值的变化。
何时使用 $watch 或 ng-change
通常情况下，如果您需要监视任意作用域中的变量，则应该使用 $watch。但是，如果您只需要监听表单元素的值，则应该使用 ng-change。
例如，如果您需要在模型中的属性变化时更新 UI，则应该使用 $watch：
<div ng-controller="MyCtrl">
<p>{{data}}</p>
<button ng-click="increment()">Increment</button>
</div>-- -------------------- ---- -------
----------------------- ---
--------------------- ---------------- -
----------- - --
--------------------- ------------------ --------- -
---------------- ------ - - ----------
---------------- ------ - - ----------
---
---------------- - ---------- -
--------------
--
---上面的代码演示了如何使用 $watch 监控 data 变量的变化，并
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25472