Angular之$watch方法监视作用域

最新推荐文章于 2022-01-10 14:36:28 发布

EffIdong

最新推荐文章于 2022-01-10 14:36:28 发布

阅读量814

点赞数

分类专栏： angularjs 文章标签： angular

本文链接：https://blog.csdn.net/Efficiency9/article/details/76083187

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在使用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>

EffIdong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular之$watch方法监视作用域

在使用angular时，常常对作用域中的属性进行监视，当其发生改变时，作出相应处理，angular为我们提供了watch方法watch方法 watch是对类型的属性进行监视，熟悉js就会知道，js语言中有七种数据类型numberstringnullundefinedbooleanobjectsymbol (ES6加入）以上其中数据类型中，又有基本类型和引用类型的区别（此处不做
复制链接

扫一扫