浅谈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 相关文章推荐
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
Javascript 实用小技巧
Apr 07 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
js中小数转换整数的方法
Jan 26 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 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设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
vue2.0+vue-dplayer实现hls播放的示例
2018/03/02 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
简单的python后台管理程序
2017/04/13 Python
python实现简单登陆系统
2018/10/18 Python
Django框架 querySet功能解析
2019/09/04 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
安全检查管理制度
2014/02/02 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
建筑工程催款函
2015/06/24 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
Python合并多张图片成PDF
2021/06/09 Python