Angular中的$watch方法详解

深入理解Angular中的$watch方法

在Angular应用中，数据绑定和模型更新是核心功能之一。这其中，$watch方法扮演着非常重要的角色。本文将通过实例详细解读$watch方法，包括其简介、基本用法以及一些高级特性。

一、$watch方法简介

在Angular的digest执行过程中，如果观察的对象（即watch所监听的值）发生变化，就会触发$watch方法。简单来说，$watch方法用于手动监听一个对象，当该对象发生变化时，触发相应的事件。AngularJS内部的watch机制实现了页面随模型的即时更新。

二、$watch方法的基本用法

$watch方法的语法如下：

$watch(watchFn, watchAction, deepWatch)

watchFn：可以是angular表达式或函数的字符串。

watchAction：当watchFn发生变化时被调用的函数，其参数为newValue, oldValue, scope。

deepWatch：可选的布尔值，用于检查被监控对象的每个属性是否发生变化。

$watch方法会返回一个函数，可以用于注销这个watch。

三、实例演示

假设我们有一个简单的表单，其中有一个文本输入框，用于输入名字。我们想要知道名字被改变了多少次。

控制器代码如下：

```javascript

var firstController = function ($scope) {

$scope.name = '张三';

$scope.count = 0;

// 监听name模型的变化，每次变化时触发相应的函数

$scope.$watch('name', function (newValue, oldValue) {

$scope.count++;

if ($scope.count > 30) {

$scope.name = '已经大于30次了';

}

});

}

```

HTML代码如下：

```html

```

运行效果：前30次可以随意修改名字，当修改了30次后，名字固定为'已经大于30次了'。这就是$watch的作用，每次模型的改变都会触发第二个函数。

四、$watch的第三个参数deepWatch详解

当监听的是一个对象或数组时，例如：

```javascript

$scope.data = {

name: '李四',

count: 20

}

```

如果想同时监听data对象的name和count属性变化，可以使用deepWatch参数：

```javascript $scope.$watch('data', function() {}, true) ` 这里的第三个参数true表示监听，即当data对象内部的属性发生变化时也会触发监听函数。如果不加第三个参数或者设为false，那么只有data对象引用改变时才会触发监听函数。 总结 本文通过详细的实例介绍了Angular中的$watch方法，包括其简介、基本用法以及一些高级特性。希望通过本文的介绍能帮助读者更好地理解$watch方法在Angular中的作用和用法。 （本文由长沙网络推广团队撰写，如有任何疑问请留言，我们会及时回复。） ` 最后的 `cambrian.render('body')` 这一行代码看起来是与文章无关的额外内容，可能是一个错误或者特定环境下的代码片段，应该被移除或替换为相关的内容。