Vuejs中的watch实例详解(监听者)
更新时间：2020年01月05日 15:21:48 作者：candy
本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
最近刚刚追完庆余年，心思还总是在剧情里，然后就觉得在vuejs里watch就是监察院，一个不折不扣的特务机构。在Vue中watch被称为监听者，它随时观察这vue实例中每一个数据的变化，当数据发生改变，做出响应。
通过下面的示例代码来看一下这个监察院是怎么运作的：
new Vue({
el:"#app",
data(){
reutrn {
candy:""
}
},
//传说中的监察院start
watch:{
candy:{
handler(newVal,oldVal){
},
immediate: true,
deep:true
}
}
//传输中的监察院end
})
/***
watch中监控这candy这个数据的变化，
handler中传入了两个参数：
newVal->是改变后的数据
oldVal->是改变前的数据
***/
按照庆余年的剧情分析，监察院在监控candy这个人，一旦candy发生变节，就会执行handler中的操作，newVal和oldVal就好像是提供给监察院人员来判断如果candy是内部斗争还是叛国，根据情节处以什么样的处罚。
代码中 immediate 和 deep 又是什么意思呢？
immediate和deep像是庆帝给陈萍萍的指令：
immediate为true是告诉监察院不管candy有没有变节，都先给他点处罚，敲山震虎！
deep为true是告诉监察院往深了查，看看有没有什么人跟这个人联络了，联络以后又发生了事！
写这篇文章的时候，我也在跟朋友探讨watch和updated，updated也是在数据发生改变的时候做出相应，但是如果将updated说成是监察院就感觉太喽了！updated不能指定监测数据，只要有数据发生变化就会指向updated中的方法，不管谁发生变化都会执行，这么不灵活怎么能配的上监察院这么厉害的特务机构呢！嘻嘻！
总结
以上所述是小编给大家介绍的Vuejs中的watch实例详解，希望对大家有所帮助！
相关文章
vue组件通信的方式，这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多，本文将对vue组件通信方式进行一下总结，感兴趣的可以学习一下2021-12-12
watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数，这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue源码学习之关于对Array的数据侦听实现，Vue使用了一个方式来实现Array类型的监测就是拦截器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-04-04
贪吃蛇游戏想必是很多70、80后的回忆，一直到现在也深受大家的喜欢。本文将利用Vue+uniapp实现这一经典的游戏，感兴趣的可以了解一下2022-04-04
这篇文章主要介绍了Vuex的热更替如何实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了Vue登录主页动态背景短视频的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家介绍了vuex的五个核心概念和基本使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-09-09
这篇文章主要为大家详细介绍了vue验证码插件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了elementui中使用el-tabs切换实时更新数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue树表格分页的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
最新评论