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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
Javascript 去除数组的重复元素
May 04 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
Dec 30 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
js对象简介与基本用法示例
Mar 13 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输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
img标签中onerror用法
2009/08/13 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python IDLE入门简介
2017/12/08 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
应届生高等护理求职信
2013/10/12 职场文书
优秀生推荐信范文
2013/11/28 职场文书
员工入职担保书范文
2014/04/01 职场文书
抵押贷款承诺书
2014/05/30 职场文书
建议书范文
2015/02/05 职场文书
个人政治思想总结
2015/03/05 职场文书
公司联欢会主持词
2015/07/04 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
Python常遇到的错误和异常
2021/11/02 Python