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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
js导出txt示例代码
Jan 14 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
详解jquery和vue对比
Apr 16 jQuery
vue-loader中引入模板预处理器的实现
Sep 04 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
谈谈PHP语法(2)
2006/10/09 PHP
文件上传程序的全部源码
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python pytest进阶之fixture详解
2019/06/27 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
python线性插值解析
2020/07/05 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
毕业自我鉴定范文
2013/11/06 职场文书
自荐书格式
2013/12/01 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
入职担保书怎么写
2014/05/12 职场文书
单位计划生育责任书
2015/05/09 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
浅谈Python协程asyncio
2021/06/20 Python