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+html5实现div弹出层并遮罩背景
Apr 15 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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/17 数码科技
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
js实现拖拽元素选择和删除
2020/08/25 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
网络安全方面的面试题
2015/11/04 面试题
编辑找工作求职信范文
2013/12/16 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
十八大演讲稿
2014/05/22 职场文书
爱牙日活动总结
2014/08/29 职场文书
2014年节能工作总结
2014/12/18 职场文书
运动会表扬稿范文
2015/05/05 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python