一、普通监听
watch: {
name(newVal, oldVal) {
console.log(newVal)
}
}
二、immediate属性(默认false)
watch: {
name: {
handler(newVal, oldVal){
console.log(newVal)
}
immediate: true
}
}
三、deep属性(深度监听)
watch: {
name: {
handler(newVal, oldVal){
console.log(newVal)
}
immediate: true
deep: true
}
}
总结:第一种普通监听,当值name第一次绑定时并不会触发监听,只有当绑定值name发生改变才会触发监听,若需要第一次绑定值进而触发,可以使用第二种设置immediate: true。若对对象进行深度监听(监听对象会对每个属性添加监听,会造成性能损耗),可以直接深度监听对象属性避免。
对象属性的普通监听
watch: {
'user.name'(newVal, oldVal) {
console.log(newVal)
}
}
对象属性的深度监听
watch: {
'user.name': {
handler(newVal, oldVal){
console.log(newVal)
}
deep: true
}
}
路由监听
watch: {
'$route'(to,from) {
console.log(to);
console.log(from);
if(to.path=="/login"){
console.log("路由跳转login");
}
}
}