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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
使用js获取QueryString的方法小结
Feb 28 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
详解vue axios中文文档
Sep 12 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 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面向对象编程快速入门
2006/10/09 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
详解python的变量缓存机制
2021/01/24 Python
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
如何写好建议书
2014/03/13 职场文书
教师自查自纠材料
2014/10/14 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python