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)
}
} 本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-09-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
