$scope.$watch 不会在每次更改时触发

AngularJS

使用AngularJS开发Web应用程序时，我们经常会使用$scope对象来管理应用程序的数据和状态。在一些情况下，我们希望能够在数据发生变化时执行一些特定的操作。为了实现这个目的，AngularJS提供了$scope.$watch函数。

$scope.$watch函数允许我们监视$scope对象中的某个属性，并在该属性的值发生变化时执行一个回调函数。这个回调函数可以用来更新界面、发送网络请求或执行其他一些操作。但需要注意的是，$scope.$watch并不会在每次属性值发生变化时都触发，而是在AngularJS的脏检查机制执行之后才会触发。

下面我们来看一个简单的例子，演示如何使用$scope.$watch函数。假设我们有一个输入框和一个显示框，我们希望在输入框中输入内容时实时更新显示框中的内容。我们可以使用$scope.$watch来监视输入框的值，并在每次值发生变化时更新显示框的内容。

html
<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="inputValue">
  <div>{{displayValue}}</div>
</div>

Javascript
angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.displayValue = '';
    $scope.$watch('inputValue', function(newValue, oldValue) {
      $scope.displayValue = newValue;
    });
  });

在上面的例子中，我们创建了一个名为myApp的AngularJS应用程序，并在myController控制器中定义了两个$scope属性：inputValue和displayValue。我们使用ng-model指令将输入框与inputValue属性绑定，这样当输入框的值发生变化时，inputValue的值也会相应地更新。

在控制器中，我们使用$scope.$watch函数来监视inputValue属性的变化。当inputValue的值发生变化时，$scope.$watch的回调函数将被触发，并将新旧值作为参数传递进来。在回调函数中，我们将新值赋给displayValue属性，从而实现了实时更新显示框的功能。

注意事项

在使用$scope.$watch时，需要注意以下几个问题：

1. 设置第三个参数为true，可以深度监视对象或数组的变化。默认情况下，$scope.$watch只会监视对象或数组的引用是否发生变化，而不会监视对象或数组中的属性值是否发生变化。如果需要监视对象或数组中的属性值变化，可以将第三个参数设置为true。

2. 使用$scope.$watch返回的函数可以用来取消监视。当我们不再需要监视某个属性时，可以调用这个返回的函数来取消监视。

3. 避免在回调函数中执行耗时操作。由于$scope.$watch是在AngularJS的脏检查机制执行之后触发的，如果在回调函数中执行耗时操作，可能会导致页面卡顿或性能问题。

$scope.$watch是AngularJS中非常有用的一个函数，它可以帮助我们在数据发生变化时执行一些特定的操作。通过合理地使用$scope.$watch，我们可以实现实时更新界面、响应用户操作、发送网络请求等功能。

在开发过程中，我们需要注意$scope.$watch的使用方法和注意事项，以免出现意料之外的问题。希望本文能够对您理解和使用$scope.$watch函数有所帮助。