浅谈angularJS的$watch失效问题的解决方案


Posted in Javascript onAugust 11, 2017

本文介绍了浅谈angularJS的$watch失效问题的解决方案,分享给大家,顺便给自己留个笔记

$watch方法,它可以帮助我们在每个scope中监视其中的变量。

$watch 单一的变量

对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。

$scope.count=1;
$scope.$watch('count',function(){
...
});

$watch 多个变量

对于多个变量的监视变化,执行同一函数的话,可以将这几个变量转为字符串,以‘+'号隔开来进行监视

//当count或page变化时,都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch对象或数组

发现用上面两种方法去监视数组时,会发现即使数组的内容改变了,也没有触发到这个匿名函数。之后发现watch函数其实是有三个变量的,第一个参数是需要监视的对象,第二个参数是在监视对象发生变化时需要调用的函数,实际上watch还有第三个参数,它在默认情况下是false。

当第三个参数是false时,其实watch函数监视的是数组的地址,而数组的内容的变化不会影响数组地址的变化,所以watch函数失灵了。

解决办法,就是在后面添加第三个参数为true就好(当然,也可以将这监听返回结果为JSON字符串形式的该对象或数组的的匿名函数。)

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

或者将监听返回结果为JSON字符串形式的该对象或数组的的匿名函数

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){
  return JSON.stringify($scope.items);
},function(){...});

$watch 函数的返回结果

在写代码的时候,有时会遇到要监视一个函数返回的结果是否变化的情况,所以查了一下$watch 监视函数的情况。

方法1:监视对象为“函数名()”的字符串,记得加“()”!

//未完成的任务个数
$scope.unDoneCount = function() {
  var count = 0;
  angular.forEach($scope.todoList, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

方法2:在监视对象中设置为匿名函数,返回要监视的函数的返回值(绕晕了…)

$scope.$watch(function(){
  return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

取消$watch

watch的性能消耗好像蛮大的,所以对于已经不需要监视的watch,记得定时取消掉。

至于怎么取消了…查了好久才找到的

其实每个watch函数返回的结果就是这个watch的deregisterWatch()函数

//在chrome的控制台上,断点得到的$watch的返回值
function deregisterWatch() {
  arrayRemove(array, watcher);
  lastDirtyWatch = null;
}

所以啊,要取消watch的话,一开始将$watch的返回值保存就好啦,要取消watch的时候,在调用。

var count=1;
var unbingWatch=$scope.$watch('todoList',function(){
  console.log('todoList change');
  count++;
  //相当于在todoList变化了4次之后,就调用unbingWatch()取消这个watch
  //在第5次todoList改变的时候,就不会输出todoList change了。
  if(count>4){
    unbingWatch();
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于document.cookie的使用javascript
Oct 29 Javascript
JS hashMap实例详解
May 26 Javascript
Javascript之Date对象详解
Jun 07 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
React事件处理的机制及原理
Dec 03 Javascript
JS中min函数实例讲解
Feb 18 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 #Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 #Javascript
详解Node中导入模块require和import的区别
Aug 11 #Javascript
vue实现单选和多选功能
Aug 11 #Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
You might like
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
iview table render集成switch开关的实例
2018/03/14 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python中字典的基本知识初步介绍
2015/05/21 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python三方库之requests的快速上手
2019/03/04 Python
如何基于Python批量下载音乐
2019/11/11 Python
python 瀑布线指标编写实例
2020/06/03 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
快递业务员岗位职责
2014/01/06 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
网站美工岗位职责
2014/04/02 职场文书
寒假家长评语大全
2014/04/16 职场文书
销售提升方案
2014/06/07 职场文书
优秀员工评优方案
2014/06/13 职场文书
期末个人总结范文
2015/02/13 职场文书
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
springboot中的pom文件 project报错问题
2022/01/18 Java/Android