一、首先确认watch是一个对象,一定要当做对象来用

watch:{

}

  对象:有键,有值。

 1、键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。

 2、值:

  ① 可以是【函数】:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。

  ② 可以是【函数名】:不过这个函数名要用单引号来包裹。

  ③ 可以是【包括选项的对象】:选项包含有三个,如下:

    a. 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数

    b. 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以监听到,因此:数据的改变不需要使用深度watch)

    c. 第三个是immediate:其值是true或false,确认是否以当前的初始值执行handler的函数

var vm = new Vue({
data:{
a:1,
b:2,
c:3
},
watch:{
//值:函数
a:function(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
//值:方法名
b:'someMethod',
//选项的对象
c:{
handler:function(val, oldVal){
console.log(val, oldVal)
},
deep: true,
immediate: true
}
}
});

  参考地址:https://blog.csdn.net/wangxiaoxiaosen/article/details/78487089

       https://blog.csdn.net/itkingone/article/details/69568498

       https://blog.csdn.net/zhuming3834/article/details/79726929

        

vue中watch的用法的更多相关文章

  1. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  2. vue中keep-alive的用法

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...

  3. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  4. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  5. vue中的一些用法,持续更新中......

    1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...

  6. js中或者vue中 Object.assign()用法详解

    Object.assign()是浅拷贝. 合并对象 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object. ...

  7. Vue中的v-cloak用法

    v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...

  8. vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量. 值可以是函数:就是当你 ...

  9. vue中$set的用法

    数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)

随机推荐

  1. 分布式数据库主键id生成策略

    分布式数据库部署主要分为两种,一种是读写分离.这个需要弄主从数据库.主要是写的时候写主数据库,读的时候读从数据库.分散读取压力,对于读多写少的系统有利于 提高其性能.还有一种是分布式存储,这种主要是将 ...

  2. 详解Go语言中的屏蔽现象

    在刚开始学习Go语言的过程中,难免会遇到一些问题,尤其是从其他语言转向Go开发的人员,面对语法及其内部实现的差异,在使用Go开发时也避免不了会踩"坑".本文主要针对Go设计中的屏蔽 ...

  3. RMAN备份详解

    1.7.1数据库备份与RMAN备份的概念 1.数据库完全备份:按归档模式分为归档和非归档 归档模式 打开状态,属于非一致性备份 关闭状态,可以分为一致性和非一致性 非归档模式 打开状态,非一致性备份无 ...

  4. Redis高级进阶

    目录 本章目标 Redis配置文件 Redis存储 Redis事务 Redis发布订阅 Redis安全 本章目标 Redis配置文件 Redis的存储 Redis的事务 Redis发布订阅 Redis ...

  5. Mysql中datetime和timestamp区别

    DATETIME日期和时间的组合.支持的范围是'1000-01-01 00:00:00'到'9999-12-31 23:59:59'.MySQL以'YYYY-MM-DD HH:MM:SS'格式显示DA ...

  6. [GDAL]编译64位GDAL1.10

    环境VS2010,swigwin-2.0.11 1. 打开nmake.opt文件,找到SWIG=swig.exe这一句,假如没有将swig的目录添加到环境变量中,那么将这句后面的swig.exe修改为 ...

  7. HDU5139:Formula(找规律+离线处理)

    http://acm.hdu.edu.cn/showproblem.php?pid=5139 Problem Description f(n)=(∏i=1nin−i+1)%1000000007You ...

  8. (转)Terraform,自动化配置与编排必备利器

    本文来自作者 QingCloud实践课堂 在 GitChat 上分享 「Terraform,自动化配置与编排必备利器」 Terraform - Infrastructure as Code 什么是 T ...

  9. 认识与设计Serverless(一)

    一.什么是Serverless 定义:Serverless是一种无服务器的架构,区别于传统的Baas,SAAS,作为FAAS(函数即服务)而存在,函数由事件驱动触发并按需调用. 按需调用:区别于传统的 ...

  10. Quick中require与import的区别

    载入一个模块 import() 与 require() 功能相同,但具有一定程度的自动化特性. 假设我们有如下的目录结构: app/ app/classes/ app/classes/MyClass. ...