vue2.0 watch里面的 deep和immediate用法说明
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里面的函数。
这是一个使用vuex中的一个数据，settingData.在实际中要检测其值发生改变之后要让一个button按钮的disabled属性移除。我们可以使用类似的方式，但是这样写的时候必须使用handler函数。
还有immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。
如果不设置这些属性可以使用循环的方式。
1.若是检测的是对象，使用循环的时候可以将其转换成数组。（简单的对象处理）
1.使用Object.keys(obj)将其对象中的key拿出来放进一个数组中
a.for...in...
b.[].slice.call(object)
2.然后使用循环将对相应的值存储在另一个数组中。
3.然后根据业务逻辑处理相应的数组
2.使用es6语法糖的方式
1.数组转对象
2.对象转数组
Array.from(object)
复杂的问题总有简单的思路，遇到问题先思考出路然后写代码。
以上这篇vue2.0 watch里面的 deep和immediate用法说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了.NET/C# 使用Stopwatch测量运行时间，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25
- 这篇文章主要介绍了解决Vue watch里调用方法的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
JavaScript深度复制（deep clone）的实现方法
本文给大家介绍JavaScript深度复制（deep clone）的实现方法，涉及到js深度复制相关知识，本文介绍的非常详细，特此分享脚本之家平台供大家参考...2016-02-21- vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,下面这篇文章主要给大家介绍了关于如何利用js实现Vue2.0中数据的双向绑定功能的相关资料,需要的朋友可以参考下...2021-07-19
- 这篇文章主要介绍了浅谈vue.watch的触发条件是什么？具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07
解决nuxt页面中mounted、created、watch执行两遍的问题
这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-06vue2.0 watch里面的 deep和immediate用法说明
这篇文章主要介绍了vue2.0 watch里面的 deep和immediate用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-30- 下面小编就为大家分享一篇秒表计时器以及STOPWATCH(实例讲解)，具有很好的参考价值，希望对大家有所帮助...2020-06-25
Vue中watch、computed、updated三者的区别及用法
这篇文章主要介绍了Vue中watch、computed、updated三者的区别及用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要介绍了Vue scoped及deep使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-01
- 这篇文章主要介绍了Vue中computed和watch的区别，对Vue感兴趣的同学，可以参考下...2021-05-12
vue.js中methods watch和computed的区别示例详解
methods,watch和computed都是以函数为基础的,但各自却都不同,这篇文章主要给大家介绍了关于vue.js中methods watch和computed区别的相关资料,需要的朋友可以参考下...2021-08-05- 这篇文章主要介绍了C#使用StopWatch获取程序毫秒级执行时间的方法,涉及C#操作时间的相关技巧,需要的朋友可以参考下...2020-06-25
- iPhone用户应该对“越狱”有所了解，越狱其实就是iOS版的Root，越狱后用户可以进行各种“个性化设置”。 手表也能越狱你听说过吗？今天 Twitter 用户发布的一组照片足以让关心 Apple Watch 越狱进展的人浮想联翩。Twitter [email protected]* * 今天曝光了 Apple Watch 疑似运行 Cydia 软件的图片，并附文“work in progress”（进展中）。Cydia是越狱成功的标志，难道Apple Watch也要被越狱了吗？...2016-07-04
- 这篇文章主要介绍了Spring计时器stopwatch使用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-08-12
- 这篇文章主要给大家介绍了关于vue中watch和computed的区别与使用方法的相关资料，文中通过实例代码结束的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-08-24
- 这篇文章主要为大家详细介绍了vue2.0多条件搜索组件的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09
- iPhone 的数据充电线都是1米，但 Apple Watch 的充电线有2米长，为什么？为什么比我的身高还高，太欺负了。想想你自己的手机数据线，就知道2米的确实不太好收纳。现在，有一款专为 Apple Watch 设计的移动电源，除了能完美收纳这2米的数据线外，还能给 Apple Watch 增加足足8天的续航。...2016-07-04
解决vue侦听器watch,调用this时出现undefined的问题
这篇文章主要介绍了解决vue侦听器watch,调用this时出现undefined的问题，具有很好的参考...2020-10-30- 根据市场研究公司 IDC 的数据统计显示，全球智能手表销量在今年第二季度跟去年同期相比下降了 32%，这其中，苹果首款智能手表 Apple Watch 的销量没有达到预期是一个不可忽视...2016-08-27