这篇文章运用简单易懂的例子给大家介绍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的使用方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。