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是内部斗争还是叛国,根据情节处以什么样的处罚。
代码中immediatedeep又是什么意思呢?
immediate和deep像是庆帝给陈萍萍的指令:
immediate为true是告诉监察院不管candy有没有变节,都先给他点处罚,敲山震虎!
deep为true是告诉监察院往深了查,看看有没有什么人跟这个人联络了,联络以后又发生了事!

写这篇文章的时候,我也在跟朋友探讨watch和updated,updated也是在数据发生改变的时候做出相应,但是如果将updated说成是监察院就感觉太喽了!updated不能指定监测数据,只要有数据发生变化就会指向updated中的方法,不管谁发生变化都会执行,这么不灵活怎么能配的上监察院这么厉害的特务机构呢!嘻嘻!
本文纯属个人理解,如果有什么地方理解不对,往大家留言指正!!!

Image placeholder
candy
未设置
  42人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Vue.js中的无渲染行为插槽

在本文中我们讨论Vue中的无渲染插槽模式能够帮助解决哪些问题。在Vue.js2.3.0中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。在这里

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

pymysql fetchone () , fetchall () , fetchmany ()

最近在用python操作mysql数据库时,碰到了下面这两个函数,标记一下: 1.定义 1.1fetchone(): 返回单个的元组,也就是一条记录(row),如果没有结果则返回None 1.2fet

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

js中的高阶函数

高阶函数高阶函数是函数式编程的一种代码实现方案,一般把接受一个或多个函数作为参数,或者返回一个函数的函数叫做高阶函数。js中最常见的一些高阶函数如闭包(返回函数),一些内置函数(传入函数)等。Arra

了解Node.js中的流(Stream)

Node.js中的流(Stream)是出了名的难用甚至是难以理解。用DominicTarr的话来说:“流是Node中最好的,也是最容易被误解的想法。”即使是Redux的创建者和React.js的核心团

如何应对Kubernetes中的存储管理挑战?

Kubernetes是Google开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。对于那些工作负载多样化、不断变化的企业来说,使用Kubernetes是非常有利的。与容器一样,

实操讲解:使用Keras中的自动编码器进行极端罕见事件分类

在这篇文章中,我们将学习如何实现用自动编码器来构建稀有事件分类器。我们将使用来自此处的真实稀有事件数据集。背景什么是极端罕见的事件?在一个罕见的问题中,我们有一个不平衡的数据集。意思是,我们得到的阳性

js中如何引入css文件以及路径问题

js中如何引入css文件以及路径问题一、在js中引入css文件的方法:1、通过document.createElement方法创建link标签;2、通过setAttribute方法设置link标签的c

js中如何移除css样式?

js中如何移除css样式?dom元素应用css有两种方式:●通过class类名和id名应用样式●通过指定style属性应用样式我们可以针对以上两种方式写移除css样式的方法(相关课程推荐:JS视频教程

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

怎么查看nodejs是否安装?

查看nodejs是否安装的方法:1、cmd执行命令开始菜单搜索框输入cmd,点击第一个结果,打开cmd命令行。在cmd命令行中,输入node-v并执行,显示node版本,证明安装成功。例如我的版本是1

如何查看nodejs版本号?

在windows上查看nodejs的版本号想要在电脑上查node版本号,可以打开cmd命令行,使用命令来查看。1、在开始菜单的搜索框中输入cmd,点击cmd.exe打开cmd命令窗口。2、使用命令查看

nodejs都能做什么?

Node对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。Node是一个基于ChromeJavaScript运行时

nodejs为什么叫node?

nodejs为什么叫node?最开始NodeJs作者Dahl取的名字叫web.js,仅仅是一个web服务器,是Apache和其他“阻塞”服务器的替代方案。但是该项目很快就超出了他最初的Web服务器库的

nodejs怎么解析less?

nodejs怎么解析less?在cmd中使用npm中的less模块来解析less。npm(全称NodePackageManager,即“node包管理器”)是以JavaScript编写的软件包管理系统

nodejs怎么运行项目?

nodejs怎么运行项目?想要运行nodeJS项目,只需要安装好node的环境就可以了,不需要其他的配置。使用cmd命令,打开window窗口,输入node-v,如果运行的结果是nodeJS的一个版本

深入了解Nodejs Buffer的使用

JavaScript起初为浏览器而设计,没有读取或操作二进制数据流的机制。Buffer类的引入,则让NodeJS拥有操作文件流或网络二进制流的能力。Buffer基本概念Buffer对象的内存分配不是在

学习 nodejs+mongodb+koa2 写接口(一) 环境布置

一.环境准备最近在学用Nodejs写后端接口,了解到koa2是Nodejs的一个框架。可以快速开发后端接口,同时也能更快熟悉Nodejs以下是所需的环境node  v7.6+,可以用nvm或者n安装指

学习 nodejs+mongodb+koa2 写接口(二) koa2教程入门

一.hellokoa安装koa2#初始化package.json npminit #安装koa2 npminstallkoahelloworld代码constKoa=require('koa') c

nodejs调用外部接口

前言在日让的工作开发中,我们不仅仅要使用node来封装提供一些http接口,也会在node服务中调用一些第三方的HTTP接口,那么如何操作?request安装依赖npminstallrequest-S

2019全球PostgreSQL生态报告出炉,PG为何从RDBMS中脱颖而出?

墨墨导读:本文是近期ScaleGrid发布的2019PG趋势报告,从不同的角度解读了PostgreSQL如何在众多优秀的RDBMS中脱颖而出,原文:https://scalegrid.io/blog/

技术峰会归来,AWS中国赢在何处?

摘要:以『即刻构建』为主题的AWS技术峰会2019,其目的是为了推进企业上云,让企业上云不再只是一个想法,而是立即行动起来变成事实。这与此前结束的阿里云峰会,阿里云喊出“全面上云的拐点到来”异曲同工。

css中怎么把图片颜色反转

css中怎么把图片颜色反转css把图片颜色反转可以使用invert滤镜效果,invert滤镜就是为了设置元素的反色效果,它的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色。.nor

css中Position属性图文详解

1.介绍1.1说明Position属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。1.2主要的值①absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。