在 AngularJS 中，使用 $watch 函数可以监听变量的变化，从而触发相应的事件。但是，在某些情况下，只监听变量本身可能并不够，还需要深度检测该变量的子属性或元素的变化。在本文中，我们将介绍如何使用 AngularJS 中的深度检测 watch，以及在实际开发中的应用。
什么是深度检测 watch？
在 AngularJS 中，$watch 函数默认只检测变量本身的变化。例如：
$scope.data = {
name: 'John',
age: 30
};
$scope.$watch('data', function(newValue, oldValue) {
console.log('data has changed:', newValue, oldValue);
}, true);上面的代码中，通过 true 参数启用了深度检测。这样，$watch 函数会检测 data 对象及其子属性的变化，而不仅仅是 data 变量本身的变化。例如：
$scope.data.name = 'Jane'; // 触发 $watch 函数 $scope.data.job = 'developer'; // 触发 $watch 函数
深度检测 watch 的应用
深度检测 watch 在 AngularJS 开发中非常常见，特别是在处理嵌套的数据结构时。例如，我们可以使用深度检测 watch 来监听数组的变化：
-- -------------------- ---- ------- ----------- - - - ----- ------- ---- -- -- - ----- ------- ---- -- - -- --------------------- ------------------ --------- - ----------------- --- ---------- --------- ---------- -- ------ ------------------ ----- ------- ---- -- --- -- -- ------ --
在上面的例子中，当我们向 list 数组中添加一个新元素时，$watch 函数会触发。
深度检测 watch 同样适用于监听 DOM 元素中嵌套的数据结构的变化。例如，我们可以使用深度检测 watch 监听表单字段的变化：
$scope.form = {
username: '',
password: ''
};
$scope.$watch('form', function(newValue, oldValue) {
console.log('form has changed:', newValue, oldValue);
}, true);在上面的例子中，$watch 函数会检测 form 对象及其子属性的变化，包括 username 和 password 字段的变化。我们可以使用 ng-model 指令绑定表单字段的值，以实现自动化的双向数据绑定：
<form> <input type="text" ng-model="form.username"> <input type="password" ng-model="form.password"> </form>
深度检测 watch 的注意事项
尽管深度检测 watch 在处理嵌套的数据结构时非常有用，但在某些情况下可能会带来性能问题。因为深度检测 watch 要递归遍历整个数据结构，因此对于大型的数据结构，会产生比较明显的性能影响。
为了避免性能问题，我们可以考虑使用手动的属性监听器，或者使用 $watchCollection 函数，而不是 $watch 函数。$watchCollection 函数只会监听集合（如数组和对象）中元素的添加和删除，而不会监听元素属性的变化。例如：
$scope.list = [
{ name: 'John', age: 30 },
{ name: 'Mary', age: 25 }
];
$scope.$watchCollection('list', function(newValue, oldValue) {
console.log('list has changed:', newValue, oldValue);
});结论
使用深度检测 watch 可以帮助我们快速、准确地监听嵌套的数据结构的变化。但是，在实际开发中，我们也需要注意性能问题，避免因为深度检测 watch 导致应用的性能下降。在这方面，我们可以采用手动的属性监听器或者 $watchCollection 函数来优化代码。
示例代码
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
--------- --------- -----------
-------
----- -----------------------
--------- -- ---- --------
---
-- --- -- -- --- -- --- --- - -- --- ---
----
------
------ ----------- -------------------------
------ --------------- -------------------------
-------
----
--- --------------- -- ------
-- --------- -- --- -------- ---
-----
-----
------- -----------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
----------- - -------
---------- - ---
---------- - ------------
----------- - -
--------- ---
--------- --
--
----------- - -
- ----- ------- ---- -- --
- ----- ------- ---- -- -
--
--------------------- ------------------ --------- -
----------------- --- ---------- --------- ----------
-- ------
------------------------------- ------------------ --------- -
----------------- --- ---------- --------- ----------
---
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675173a08bd460d3ad89d3cf