Vuejs中的watch实例详解(监听者)


Posted in Javascript onJanuary 05, 2020

最近刚刚追完庆余年,心思还总是在剧情里,然后就觉得在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实例详解,希望对大家有所帮助!

Javascript 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 #Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 #Javascript
详解jQuery中的prop()使用方法
Jan 05 #jQuery
vue 对axios get pust put delete封装的实例代码
Jan 05 #Javascript
JavaScript修改注册表实例代码
Jan 05 #Javascript
详解JavaScript修改注册表的方法
Jan 05 #Javascript
js判断非127开头的IP地址的实例代码
Jan 05 #Javascript
You might like
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
php封装的验证码类分享
2017/02/26 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python中常见的异常总结
2018/02/20 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python中time库的实例使用方法
2019/10/31 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python如何存储数据到json文件
2020/03/09 Python
django跳转页面传参的实现
2020/09/17 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
介绍一下linux的文件权限
2012/02/15 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
领班岗位职责范文
2014/02/06 职场文书
就业表自我评价分享
2014/02/06 职场文书
2014年学习部工作总结
2014/11/12 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
Java实现注册登录跳转
2022/06/16 Java/Android
Redis过期数据是否会被立马删除
2022/07/23 Redis