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脚本特性
Sep 13 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
vue实现放大镜效果
Sep 17 Javascript
vue 把二维或多维数组转一维数组
Apr 24 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
php防止sql注入代码实例
2013/12/18 PHP
php中require和require_once的区别说明
2014/02/27 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python文件写入实例分析
2015/04/08 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
详解python之配置日志的几种方式
2017/05/22 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
学习计划书怎么写
2014/09/15 职场文书
银行求职自荐信范文
2015/03/04 职场文书
教师继续教育反思周记
2015/06/25 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android