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