Vue - watch高阶用法
1. 不依赖新旧值的watch
很多时候,我们监听一个属性,不会使用到改变前后的值,只是为了执行一些方法,这时可以使用字符串代替
data:{
name:'Joe'
},
watch:{
name:'sayName'
},
methods:{
sayName(){
console.log(this.name)
}
}
2.立即执行watch
总所周知,watch是在监听属性改变时才会触发,有些时候,我们希望在组件创建后watch能够立即执行一次。
可能想到的的方法就是在create生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法
data:{
name:'Joe'
},
watch:{
name:{
handler: 'sayName',
immediate: true
}
},
methods:{
sayName(){
console.log(this.name)
}
}
上面我们给入一个对象
handler: 触发监听执行的方法(需要用到改变前后的值时,可换成函数)
immediate: 监听开始之后被立即调用
3. 深度监听
在监听一个对象时,当对象内部的属性被改变时,无法触发watch,我们可以继续使用对象的方式为其设置深度监听
data:{
studen: {
name:'Joe',
skill:{
run:{
speed: 'fast'
}
}
}
},
watch:{
studen:{
handler: 'sayName',
deep: true
}
},
methods:{
sayName(){
console.log(this.studen)
}
}
设置deep为true后,无论嵌套多深,只要属性值被改变都会触发监听。但这种方式开销会较大,监听器会一层一层往下找,为每个属性添加监听器。
如果我们只是监听对象的某个属性改变时,可以这样做:
watch:{
'studen.name':{
handler: 'sayName'
}
}
4.监听执行多个方法
使用数组可以设置多项,形式包括字符串、函数、对象
data:{
name:'Joe'
},
watch:{
name:[
'sayName1',
function(newVal, oldVal){
this.sayName2()
},
{
handler: 'sayName3',
immaediate: true
}
]
},
methods:{
sayName1(){
console.log('sayName1==>', this.name)
},
sayName2(){
console.log('sayName2==>', this.name)
},
sayName3(){
console.log('sayName3==>', this.name)
}
}
watch文档:https://cn.vuejs.org/v2/api/#watch
Vue - watch高阶用法的更多相关文章
- Python高阶用法总结
目录 1. lambda匿名函数 1.1 函数式编程 1.2 应用在闭包 2. 列表解析式 3. enumerate内建函数 4. 迭代器与生成器 4.1 迭代器 4.3 生成器 5. 装饰器 前言: ...
- ASP.NET Core 6框架揭秘实例演示[33]:异常处理高阶用法
NuGet包"Microsoft.AspNetCore.Diagnostics"中提供了几个与异常处理相关的中间件,我们可以利用它们将原生的或者定制的错误信息作为响应内容发送给客户 ...
- 5. vue常用高阶函数及综合案例
一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...
- vue的高阶组件
探索Vue高阶组件 探索Vue高阶组件的使用 Vue高阶组件的使用方法 高阶组件应用-组件重新实例化 深入理解React 高阶组件 探索Vue高阶组件 2018-01-05 探索Vue高阶组件 Vue ...
- HashMap高阶用法,十倍提升开发效率
HashMap在工作中使用非常频繁,其实在JDK1.8的时候新增一些更高阶的用法,熟练使用这些方法可以大大提升开发效率,写出更简洁优美的代码. 1. get方法指定返回默认值(getOrDefault ...
- day67 ORM模型之高阶用法整理,聚合,分组查询以及F和Q用法,附练习题整理
归纳总结的笔记: day67 ORM 特殊的语法 一个简单的语法 --翻译成--> SQL语句 语法: 1. 操作数据库表 创建表.删除表.修改表 2. 操作数据库行 增.删.改.查 怎么连数据 ...
- python的一些高阶用法
map的用法 def fn(x): return x*2 L1 = [1,2,3,4,5,6] L2 = list(map(fn,L1)) L2 [2, 4, 6, 8, 10, 12] 通过上面的运 ...
- lua高阶用法 OO的实现
//Lua的类的实现,可以派生,可重写方法 local _class={} function class(super) local class_type={} class_type.ctor=fals ...
- Python 抽象篇:面向对象之高阶用法
1.检查继承 如果想要查看一个类是否是另一个类的子类,可以使用内建的issubclass函数 如果想知道已知类的基类,可以直接使用特殊特性__bases__ 同时,使用isinstance方法检查一个 ...
随机推荐
- 010.Kubernetes二进制部署kube-controller-manager
一 部署高可用kube-controller-manager 1.1 高可用kube-controller-manager介绍 本实验部署一个三实例 kube-controller-manager 的 ...
- Spring Security登录验证流程源码解析
一.登录认证基于过滤器链 Spring Security的登录验证流程核心就是过滤器链.当一个请求到达时按照过滤器链的顺序依次进行处理,通过所有过滤器链的验证,就可以访问API接口了. SpringS ...
- C# VII: 统计文本行数
本文基于StackOverflow的以下问题收集整理而成. What is the fastest waty to count newlines in a large .NET string: htt ...
- docker入门篇
在网上的教程中,大多数是建议利用linux来安装docker,在此我也建议大家用linux安装,为什么?请看下图 docker使用go语言开发,并且运行在linux系统下,而如果想用window运行, ...
- 你必须知道的容器日志 (2) 开源日志管理方案 ELK
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.上一篇<你必须知道的容器日志(1)>中介绍了Docker自带的log ...
- ftp用户和密码
centos7 FTP修改密码: 1.查看ftp的用户:cat /etc/vsftpd/ftpusers 2.passwd ftp的用户 (输入两次) 3.重启ftp:service vsftpd r ...
- Python3 之 类属性与实例属性
1.类属性与实例属性 类属性就相当与全局变量,实例对象共有的属性,实例对象的属性为实例对象自己私有. 类属性就是类对象(Tool)所拥有的属性,它被所有类对象的实例对象(实例方法)所共有,在内存中只存 ...
- nslookup命令查找域名
了解 DNS 域名服务 熟悉使用 nslookup 查找 DNS 服务器上登记的域名,记录几次查询的结果, 及服务器的 ip. 1. 某个子域下的一部分主机的名字- IP 地址对应关系,如 flame ...
- [UWP]UIElement.Clip虽然残废,但它还可以这样玩
1. 复习一下WPF的UIElement.Clip 用了很久很久的WPF,但几乎没有主动用过它的Clip属性,我只记得它很灵活,可以裁剪出多种形状.在官方文档复习了一下,大致用法和效果如下: < ...
- Java8 Stream中间操作使用详解
前面两篇简单的介绍了Stream以及如何创建Stream,本篇就给大家说说stream有哪些用途,以及具体怎样使用. 再次介绍Stream Stream 使用一种类似用于SQL 语句从数据库查询数据的 ...