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高阶用法的更多相关文章

  1. Python高阶用法总结

    目录 1. lambda匿名函数 1.1 函数式编程 1.2 应用在闭包 2. 列表解析式 3. enumerate内建函数 4. 迭代器与生成器 4.1 迭代器 4.3 生成器 5. 装饰器 前言: ...

  2. ASP.NET Core 6框架揭秘实例演示[33]:异常处理高阶用法

    NuGet包"Microsoft.AspNetCore.Diagnostics"中提供了几个与异常处理相关的中间件,我们可以利用它们将原生的或者定制的错误信息作为响应内容发送给客户 ...

  3. 5. vue常用高阶函数及综合案例

    一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...

  4. vue的高阶组件

    探索Vue高阶组件 探索Vue高阶组件的使用 Vue高阶组件的使用方法 高阶组件应用-组件重新实例化 深入理解React 高阶组件 探索Vue高阶组件 2018-01-05 探索Vue高阶组件 Vue ...

  5. HashMap高阶用法,十倍提升开发效率

    HashMap在工作中使用非常频繁,其实在JDK1.8的时候新增一些更高阶的用法,熟练使用这些方法可以大大提升开发效率,写出更简洁优美的代码. 1. get方法指定返回默认值(getOrDefault ...

  6. day67 ORM模型之高阶用法整理,聚合,分组查询以及F和Q用法,附练习题整理

    归纳总结的笔记: day67 ORM 特殊的语法 一个简单的语法 --翻译成--> SQL语句 语法: 1. 操作数据库表 创建表.删除表.修改表 2. 操作数据库行 增.删.改.查 怎么连数据 ...

  7. 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] 通过上面的运 ...

  8. lua高阶用法 OO的实现

    //Lua的类的实现,可以派生,可重写方法 local _class={} function class(super) local class_type={} class_type.ctor=fals ...

  9. Python 抽象篇:面向对象之高阶用法

    1.检查继承 如果想要查看一个类是否是另一个类的子类,可以使用内建的issubclass函数 如果想知道已知类的基类,可以直接使用特殊特性__bases__ 同时,使用isinstance方法检查一个 ...

随机推荐

  1. java多线程与线程并发一:线程基础回顾

    本文章内容整理自:张孝祥_Java多线程与并发库高级应用视频教程 线程简单来讲就是程序正在做的事情.多线程即一个程序同时做多件事情,一个线程就是一件事情. 在java中创建线程的方法有两种. 方法一是 ...

  2. MyBatis动态语句if与choose的区别

    if(通过“title”和“author”两个参数进行可选搜索): <select id="findActiveBlogLike" resultType="Blog ...

  3. 如何对 React 函数式组件进行优化

    文章首发个人博客 前言 目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用.另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks ...

  4. hdu 1533 Going Home (KM)

    Going HomeTime Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  5. 用java实现“钉钉微应用,免登进入某H5系统首页“功能”

    一.前言 哈哈,这是我的第一篇博客. 先说一下这个小功能的具体场景: 用户登录钉钉app,点击微应用,获取当前用户的信息,与H5系统的数据库的用户信息对比,如果存在该用户,则点击后直接进入H5系统的首 ...

  6. opencv 6 图像轮廓与图像分割修复 3 图像的矩,分水岭,图像修补

    图像的矩 矩的计算:moments()函数 计算轮廓面积:contourArea()函数 #include "opencv2/highgui/highgui.hpp" #inclu ...

  7. MySQL索引长度限制

    索引 TextField是不支持建立索引的 MySQL对索引字段长度有限制 innodb引擎的每个索引列长度限制为767字节(bytes),所有组成索引列的长度和不能大于3072字节 myisam引擎 ...

  8. 线程池ThreadPoolExecutor的使用方法

    方法我们通过继承Thread类和实现runnable接口或者callable接口三种方式实现. 继承Thread类实际上也是实现了runnable接口,被继承的类主要是实现run()方法,通过star ...

  9. 【NHOI2018】扑克游戏

    [问题描述] 有一种别样“小猫钓鱼”扑克游戏.有 N 张牌,每张牌都有一个花色和点数.游戏的规则:扑克接龙时,若前面有同样花色的牌,你可以将这两张牌连同之间的牌都取走,得到的分值为取走牌点数之和.这里 ...

  10. Web渗透测试流程

    什么是渗透测试? 渗透测试 (penetration test)并没有一个标准的定义,国外一些安全组织达成共识的通用说法是:渗透测试是通过模拟恶意黑客的攻击方法,来评估计算机网络系统安全的一种评估方法 ...