我们知道,在Angular中,数据的双向绑定是它非常强大的功能,也是它区别于其他前端框架的特征之一,而这个功能的实现离不开$watch函数。
如果在移动端设备中,众多的数据双向绑定必然诞生大量的$watch函数执行,这些$watch函数的执行会导致页面数据加载缓慢、元素绑定方法执行效率过低等性能问题。
因此,当不需要时,必须及时释放多余的$watch检测函数。
在Angular中,当$watch函数被直接调用时,将返回一个释放$watch绑定的unbind函数。因此,根据这个特征,当需要释放某个多余的$watch监测函数时,只需要再次调用这个$watch函数就可以轻松地释放它的监测功能。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
.frame{
padding: 5px 8px;
margin: 0px;
font-size: 12px;
width: 320px;
background-color: #eee;
}
.frame button, .frame div{
margin: 5px 0px;
}
</style>
</head>
<body>
<div ng-controller="myCtrl" class="frame">
<input type="text" ng-model="content">
<div>第 {{num}} 次数据变化</div>
<button ng-click="stopWatch()">停止检测</button>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.num = 0;
$scope.stopWatch = function(){
contentWatch();
}
var contentWatch = $scope.$watch('content', function(newVal, oldVal){
if(newVal === oldVal){
return;
}
$scope.num++;
})
})
</script>
</body>
</html>
当单击“停止监测”按钮时,将会调用stopWatch方法,在这个方法中,调用contentWatch方法,而这个方法对应的就是$watch函数的返回值,即返回一个释放$watch绑定的unbind函数,最终实现停止监测的效果。