Angular 是一个流行的前端框架，它提供了很多便捷的方法来处理 DOM 和数据绑定。其中，$watch 和 $apply 方法是其中两个最基本的方法之一，也是最常用的方法之一。它们可以进行双向绑定，让数据与视图实现同步更新，提高应用的可维护性和用户体验。但是，如果不正确使用 $watch 和 $apply 方法，会导致应用性能和稳定性的问题。本文将详细介绍 Angular 中如何正确使用 $watch 和 $apply 方法，并提供一些示例代码来指导读者学习。
$watch 方法
$watch 方法是 Angular 中非常重要的方法之一，它用来监控指令或作用域表达式的变化，如果有变化，就会触发回调函数。它的作用是让视图中的数据和模型中的数据保持同步，实现双向绑定的原理。$watch 方法的基本语法为：
$scope.$watch('expression', callback, [deep]);其中，expression 是需要监控的表达式，可以是一个函数、一个字符串、一个数组等等。callback 是当 expression 的值发生变化时被调用的回调函数，通常是更新视图数据的逻辑。deep 是一个可选参数，代表是否需要深度比较。如果 deep 为 true，表示会进行深度比较，否则只会比较引用地址是否相同。值得一提的是，$watch 方法并不是一直监听变化，而是在 Angular 的 $digest 周期内触发的，因此如果 $watch 方法无法被执行，可能是因为 Angular 的 $digest 周期机制或者没有调用 $scope.$apply 方法。
为了更好的理解 $watch 方法，下面提供一个示例代码：
$scope.a = 1;
$scope.b = 2;
$scope.$watch('a', function(newVal, oldVal) {
console.log('a值发生变化，新值 = ', newVal, '旧值 = ', oldVal);
});
$scope.$watch('b', function(newVal, oldVal) {
console.log('b值发生变化，新值 = ', newVal, '旧值 = ', oldVal);
});
$scope.a = 3; //触发 a 的 $watch 方法
$scope.b = 4; //触发 b 的 $watch 方法执行以上代码，会输出下面的结果：
a值发生变化，新值 = 3, 旧值 = 1 b值发生变化，新值 = 4, 旧值 = 2
从结果可以看出，当 $scope 中的 a 和 b 变量发生改变时，对应的 $watch 方法都被触发了，并将新值和旧值打印出来。
需要注意的一点是，如果在 $watch 方法中使用到了异步执行的方法，可能会出现不稳定的情况，如下面的例子：
$scope.$watch('username', function(newVal, oldVal) {
$http.get('/api/user/' + newVal).then(function(data) {
$scope.user = data;
});
});如果 $http.get 方法是异步的，那么就会出现在 Angular 的 $digest 循环之外的异步任务，此时应该手动调用 $scope.$apply() 方法，以便让 Angular 知道有一个异步任务完成并更新数据。
$apply 方法
$apply 方法是让 Angular 知道需要更新视图的方法之一。它的作用是将 $scope 的变化通知给 Angular，让 Angular 进行 $digest 循环，以便更新视图。$apply 方法的基本语法为：
$scope.$apply([exp]);
其中，exp 是一个可选参数，代表需要执行的表达式。如果不传递 exp，那么 $apply 方法会对整个作用域进行脏检查，更新变化。需要注意的是，$apply 方法中的回调函数应该是在 Angular 的 $digest 循环之外执行，否则可能会导致代码死循环或者同步问题。
在实际开发中，大多数情况下并不需要自己手动调用 $apply 方法。通常情况下，Angular 会自动检测到 $scope 的变化，进行 $digest 循环，更新视图，但是在异步执行的情况下，例如监听 DOM 元素的异步事件或者 $http 请求的回调函数时，就需要手动调用 $apply 方法，以便让 Angular 知道有一个异步任务完成，并更新数据。
为了更好的理解 $apply 方法，下面提供一个示例代码：
$scope.username = '';
$scope.$watch('username', function(newVal, oldVal) {
console.log('username值发生变化，新值 = ', newVal, '旧值 = ', oldVal);
});
document.getElementById('username').addEventListener('keyup', function() {
$scope.username = this.value;
$scope.$apply();
});执行以上代码，当输入用户名时，会触发 $scope 中的 username 变量的 $watch 方法，并在控制台打印出对应的信息。
总结
本篇文章主要介绍了 Angular 中如何正确使用 $watch 和 $apply 方法，并提供了一些示例代码来指导读者学习。在实际开发中，$watch 和 $apply 方法是 Angular 中最基础、最常用的方法之一，掌握其使用方法能够提高应用的可维护性和用户体验。需要注意的是，在使用 $watch 和 $apply 方法时应该避免出现同步问题和性能问题，以便保证应用的稳定性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a2099badd4f0e0ffa1bb2b