watch监听事件的多种用法
一、普通监听watch: {name(newVal, oldVal) {console.log(newVal) // 打印name变化的值}}二、immediate属性(默认false)watch: {name: {handler(newVal, oldVal){console.log(newVal) // 打印name变化的值}immediate: true}}三、deep属性(深度监听)wat
·
一、普通监听
watch: {
name(newVal, oldVal) {
console.log(newVal) // 打印name变化的值
}
}
二、immediate属性(默认false)
watch: {
name: {
handler(newVal, oldVal){
console.log(newVal) // 打印name变化的值
}
immediate: true
}
}
三、deep属性(深度监听)
watch: {
name: {
handler(newVal, oldVal){
console.log(newVal) // 打印name变化的值
}
immediate: true
deep: true
}
}
总结:第一种普通监听,当值name第一次绑定时并不会触发监听,只有当绑定值name发生改变才会触发监听,若需要第一次绑定值进而触发,可以使用第二种设置immediate: true。若对对象进行深度监听(监听对象会对每个属性添加监听,会造成性能损耗),可以直接深度监听对象属性避免。
对象属性的普通监听
watch: {
'user.name'(newVal, oldVal) {
console.log(newVal) // 打印name变化的值
}
}
对象属性的深度监听
watch: {
'user.name': {
handler(newVal, oldVal){
console.log(newVal) // 打印name变化的值
}
deep: true
}
}
路由监听
watch: {
'$route'(to,from) {
console.log(to); //to表示去往的界面
console.log(from); //from表示来自于哪个界面
if(to.path=="/login"){
console.log("路由跳转login");
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)