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 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 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中路径问题的解决方案
2006/10/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
python和C语言混合编程实例
2014/06/04 Python
Python实现telnet服务器的方法
2015/07/10 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
Python中print函数简单使用总结
2019/08/05 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
django中嵌套的try-except实例
2020/05/21 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
2016年学校招生广告语
2016/01/28 职场文书