Vue - watch高阶用法
时间:2022-07-23
本文章向大家介绍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
- ZOJ 3594 Sexagenary Cycle
- React第三方组件6(状态管理之Mobx的使用③TodoList中)
- P1554 梦中的统计
- Word2Vec教程-Skip-Gram模型模型“伪”任务关于模型的更多细节隐藏层输出层
- React第三方组件6(状态管理之Mobx的使用②TodoList上)
- The 9th Zhejiang Provincial Collegiate Programming Contest
- P1789 【Mc生存】插火把
- FOJFOJ有奖月赛-2012年4月(校赛热身赛)-解题报告总结
- poj 1316 Self Numbers
- React第三方组件6(状态管理之Mobx的使用①简单使用)
- poj 1088 滑雪
- 八数码难题解法大全
- React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)
- React第三方组件5(状态管理之Redux的使用⑤异步操作)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Day18:二叉树的镜像
- ksubdomain 无状态域名爆破工具
- Day19:顺时针打印矩阵
- 疑似 KimsukyAPT 组织最新攻击活动样本分析
- 查找被删除但仍然占据磁盘的文件
- WPF 获取本机所有字体拿到每个字符的宽度和高度
- WPF 自己封装 Skia 差量绘制控件
- C# dotnet 使用 OpenXml 解析 Word 文件
- Day20:包含min函数的栈
- No module named ‘SerialClient‘和Cannot import package : rosserial_arduino
- 提升开发效率N倍的20+命令行神器!(附 demo)
- Java反射原理
- 【每日一题】46. Permutations
- 免费下论文的10个方法
- 【原创】90%的人都不会做的一道笔试题