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 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
Echarts如何重新渲染实例详解
May 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
星际原理概述
2020/03/04 星际争霸
10个实用的脚本代码工具
2010/05/04 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
React Router基础使用
2017/01/17 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Ubuntu下安装PyV8
2016/03/13 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python实时监控cpu小工具
2018/06/21 Python
Python异常的检测和处理方法
2018/10/26 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
打架检讨书300字
2014/02/02 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
python垃圾回收机制原理分析
2022/04/13 Python