Angular之$watch方法监视作用域

来源：互联网发布：电视机顶盒软件编辑：程序博客网时间：2024/05/29 17:29

在使用angular时，常常对作用域中的属性进行监视，当其发生改变时，作出相应处理，angular为我们提供了watch方法watch是对类型的属性进行监视，熟悉js就会知道，js语言中有七种数据类型

number
string
null
undefined
boolean
object
symbol (ES6加入）
以上其中数据类型中，又有基本类型和引用类型的区别（此处不做过多备注），对于基本类型，我们每一次赋值，这个基本类型变量就会被真正复制一次。而对于引用类型来说，在赋值时，仅仅将赋值的变量指向了这个引用类型（基本类型复制的是值，引用类型复制的是引用地址）

$watch在监听两种类型属性变化时是有区别的
监听基本类型

<!DOCTYPE html><html lang="en" ng-app="watchModule"><head>    <meta charset="UTF-8" >    <title>watchModule</title>    <script src="../../angular.min.js"></script></head><body><input type="text" ng-model="name"><div>{{count}}</div><script>    var watchModule=angular.module('watchModule',[]);    watchModule.run(['$rootScope',function ($rootScope) {      $rootScope.name='liang';      $rootScope.count=0;            $rootScope.$watch('name',function () {                $rootScope.count++;            })        }]);</script></body></html>

input里的内容每改变一次，count就+1

我们再看看这种方法对引用类型是否可以
监视引用类型

<!DOCTYPE html><html lang="en" ng-app="watchModule"><head>    <meta charset="UTF-8" >    <title>watchModule</title>    <script src="../../angular.min.js"></script></head><body><div ng-repeat="item in items">    <input type="text" ng-model="item.value">    <span>{{item.value}}</span></div><div>{{count}}</div><script>    var watchModule=angular.module('watchModule',[]);    watchModule.run(['$rootScope',function ($rootScope) {      $rootScope.items=[        {'value':1},        {'value':2},        {'value':3},        {'value':4},      ]      $rootScope.count=0;            $rootScope.$watch('items',function () {                $rootScope.count++;            })        }]);</script></body></html>

可以在浏览器上看到当内容变化时，count不再变化，这是因为，items的数组引用没有发生变化，即使一些属性变了，$watch也不会执行回调方法

$watch接受三个参数，第一个参数是需要监视的属性，第二个参数是监视的属性发生变化时间，执行的回调函数，第三个参数代表监视方法，默认false（引用监视），只要监视对象引用没有发生变化，就不算变化。在这个例子中，由于item的数组引用没有变化，只是一些元素属性变了。而当我们把第三个参数换成true是，监视就变成了“全局监视”，只要监视的属性发生变化，就会执行回调方法。

全局监视有一大缺点就是运行时需要遍历整个监视对象，然后在$digest之前吧整个对象深复制一遍，运行之后用angular.equal()将前后对象进行对比，导致项目消耗大量资源

除了全局监视之外，我们还可以使用一个$watchCollection的方法针对数组进行监视，他不会对数组中的每一项属性进行监视，但是会对数组项目的增减做出反应。

<!DOCTYPE html><html lang="en" ng-app="watchModule"><head>    <meta charset="UTF-8" >    <title>watchModule</title>    <script src="../../angular.min.js"></script></head><body><div ng-repeat="item in items">    <input type="text" ng-model="item.value">    <span>{{item.value}}</span></div><div>{{count}}</div><script>    var watchModule=angular.module('watchModule',[]);    watchModule.run(['$rootScope',function ($rootScope) {      $rootScope.items=[        {'value':1},        {'value':2},        {'value':3},        {'value':4},      ]      $rootScope.count=0;            $rootScope.$watchCollection('items',function () {                $rootScope.count++;            })        }]);</script></body></html>

解除监视
由于$watch方法调用完毕后挥发会另一个方法，我们只需要调用返回返回的方法可以接触作用域监视

<!DOCTYPE html><html lang="en" ng-app="watchModule"><head>    <meta charset="UTF-8" >    <title>watchModule</title>    <script src="../../angular.min.js"></script></head><body><input type="text" ng-model="name"><div>{{count}}</div><script>    var watchModule=angular.module('watchModule',[]);    watchModule.run(['$rootScope',function ($rootScope) {        $rootScope.name='liang';        $rootScope.count=0;        var unbindWatcher=$rootScope.$watch('name',function (newValue,oldValue) {            if(newValue=='xiao'){                unbindWatcher();            }          $rootScope.count++;        })    }]);</script></body></html>

阅读全文

0 0