vue中watch的用法
一、首先确认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的用法的更多相关文章
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- vue中keep-alive的用法
1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- vue中的一些用法,持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
- js中或者vue中 Object.assign()用法详解
Object.assign()是浅拷贝. 合并对象 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object. ...
- Vue中的v-cloak用法
v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Must ...
- vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"
首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量. 值可以是函数:就是当你 ...
- vue中$set的用法
数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value)
随机推荐
- Unity3D笔记三 物理引擎
一.物理引擎 1.物理引擎就是模拟真实世界中物体碰撞.跌落等反应,通过Ballance.愤怒的小鸟来理解什么是物理引擎.Unity的物理引擎使用的是NviDIA的PhysX.2.选中一个游戏对象,主菜 ...
- [Android Tips] 32. 解决 Android Device Monitor 在 Mac OS X 卡住
Alternatively you can keep latest jdk and update swt used by monitor: get updated swt: https://www.e ...
- CentOS中为新用户添加sudo权限
1.切换成root权限 su root 2.查看/etc/sudoers文件权限,如果只读权限,修改为可写权限 ls -l /etc/sudoers 3.如果是只读进行如下操作 chmod /etc/ ...
- POI官网中的例子
官方指南中的例子: http://poi.apache.org/spreadsheet/quick-guide.html#New+Sheet 这一节 Workbook wb = new HSSFWor ...
- Mysql5.7.10新加用户
INSERT INTO mysql.user(HOST,USER,authentication_string,ssl_cipher,x509_issuer,x509_subject,select_pr ...
- js-jquery-SweetAlert2【三】INPUT TYPES
1.text swal({ title: 'Input something', input: 'text', showCancelButton: true, inputValidator: funct ...
- hdu 5111 树链剖分加函数式线段树
这题说的是给了两棵树,各有100000 个节点,然后Q个操作Q<=50000; 每个操作L1 R1 L2 R2.因为对于每棵树都有一个与本棵树其他点与众不同的值, 最后问 在树上从L1到R1这条 ...
- opencv-ios开发笔记9 使用透视变换矫正扭曲的图片
http://blog.csdn.net/baixiaozhe/article/details/51762086 摄像头观察一个矩形的图片时往往只能得到一个扭曲的图片: 原图: 实际情况是摄像头经常从 ...
- bzoj1630 / bzoj2023 [Usaco2005 Nov]Ant Counting 数蚂蚁
Description 有一天,贝茜无聊地坐在蚂蚁洞前看蚂蚁们进进出出地搬运食物.很快贝茜发现有些蚂蚁长得几乎一模一样,于是她认为那些蚂蚁是兄弟,也就是说它们是同一个家族里的成员.她也发现整个 ...
- Java集合转有类型的数组之toArray(T[] a)
在java变成中慎用强制类型转换,尽量使用类自带的转换函数或泛型.先看一行代码 错误方法: String[] array= (String[]) list.toArray(); 如果list中存放的是 ...