vue2.0 watch里面的 deep和immediate用法说明


Posted in Javascript onOctober 30, 2020

deep,默认值是 false,代表是否深度监听。

immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

computed: {
 btnObj() {
 const { sign_img, check } = this
 return {
  sign_img,
  check
 }
 }
},
watch: {
 btnObj: {
 handler: function(newVal,oldVal) {
  if(!!this.sign_img && this.check){
  this.submit_flag = true
  this.sign_flag = '1'
  }else{
  this.submit_flag = false
  this.sign_flag = '0'
  }
 },
 deep: true,
 immediate: true
 }
}

补充知识:在vue中使用watch监测数据改变的deep:true,和immediate:true

在项目中,有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。

在次vue中给我们设置了深度监测数据繁盛变化的方法。

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

2.immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。

vue2.0 watch里面的 deep和immediate用法说明

这是一个使用vuex中的一个数据,settingData.在实际中要检测其值发生改变之后要让一个button按钮的disabled属性移除。我们可以使用类似的方式,但是这样写的时候必须使用handler函数。

还有immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。

如果不设置这些属性可以使用循环的方式。

1.若是检测的是对象,使用循环的时候可以将其转换成数组。(简单的对象处理)

1.使用Object.keys(obj)将其对象中的key拿出来放进一个数组中

a.for...in...

b.[].slice.call(object)

2.然后使用循环将对相应的值存储在另一个数组中。

3.然后根据业务逻辑处理相应的数组

vue2.0 watch里面的 deep和immediate用法说明

2.使用es6语法糖的方式

1.数组转对象

vue2.0 watch里面的 deep和immediate用法说明

2.对象转数组

Array.from(object)

复杂的问题总有简单的思路,遇到问题先思考出路然后写代码。

以上这篇vue2.0 watch里面的 deep和immediate用法说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
javascript 拖动表格行实现代码
May 05 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
JavaScript实现轮播图效果
Oct 30 #Javascript
vue组件添加事件@click.native操作
Oct 30 #Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 #Javascript
详解 javascript对象创建模式
Oct 30 #Javascript
ES6中的Javascript解构的实现
Oct 30 #Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 #Javascript
Echarts.js无法引入问题解决方案
Oct 30 #Javascript
You might like
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js实现密码强度检验
2017/01/15 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
高三自我鉴定范文
2013/10/19 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
六五普法规划实施方案
2014/03/21 职场文书
秘书英文求职信
2014/04/16 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
欢迎家长标语
2014/10/08 职场文书
安全生产工作汇报
2014/10/28 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫