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组件七种通信方式

    vue组件通信的方式,这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多,本文将对vue组件通信方式进行一下总结,感兴趣的可以学习一下
    2021-12-12
  • 老生常谈vue2中watch的使用

    老生常谈vue2中watch的使用

    watch的基本用法是在Vue实例中定义一个watch对象,该对象内部包含需要监听的数据项和对应的回调函数,这篇文章主要介绍了vue2中watch的使用,需要的朋友可以参考下
    2024-01-01
  • Vue源码学习之关于对Array的数据侦听实现

    Vue源码学习之关于对Array的数据侦听实现

    这篇文章主要介绍了Vue源码学习之关于对Array的数据侦听实现,Vue使用了一个方式来实现Array类型的监测就是拦截器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 基于Vue uniapp实现贪吃蛇游戏

    基于Vue uniapp实现贪吃蛇游戏

    贪吃蛇游戏想必是很多70、80后的回忆,一直到现在也深受大家的喜欢。本文将利用Vue+uniapp实现这一经典的游戏,感兴趣的可以了解一下
    2022-04-04
  • Vuex的热更替如何实现

    Vuex的热更替如何实现

    这篇文章主要介绍了Vuex的热更替如何实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue登录主页动态背景短视频制作

    Vue登录主页动态背景短视频制作

    这篇文章主要为大家详细介绍了Vue登录主页动态背景短视频的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Vuex的五大核心详细讲解

    Vuex的五大核心详细讲解

    这篇文章主要为大家介绍了vuex的五个核心概念和基本使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-09-09
  • vue验证码(identify)插件使用方法详解

    vue验证码(identify)插件使用方法详解

    这篇文章主要为大家详细介绍了vue验证码插件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • elementui中使用el-tabs切换实时更新数据

    elementui中使用el-tabs切换实时更新数据

    这篇文章主要介绍了elementui中使用el-tabs切换实时更新数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue树表格分页的实现方法详解

    Vue树表格分页的实现方法详解

    这篇文章主要介绍了Vue树表格分页的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10

最新评论