Vue 中监测路由变化时,通常不需要开启深度监听(deep: true)
1. 路由变化的本质:引用地址改变
Vue 路由的核心对象是 $route
(或通过 useRoute()
获取的路由对象),当路由发生变化(如跳转页面、参数改变)时,Vue Router 会创建一个新的 $route
对象,而不是修改原有对象的属性。
- 例如:从
/home?id=1
跳转到/home?id=2
时,$route
是一个全新的对象(引用地址改变),而非在原对象上修改query.id
。
这种情况下,普通监听(不开启 deep
)即可捕获变化,因为监听的是 $route
对象本身的引用变化,而非其内部属性的修改。
2. 深度监听的作用场景
deep: true
的作用是监听对象内部嵌套属性的变化(当对象引用不变,但内部属性被修改时)。例如:
data() {
return {
user: { name: '张三', age: 20 }
}
}
// 若只修改 user.age,不修改 user 的引用,需开启 deep 才能监听到
watch: {
user: {
handler(newVal) {},
deep: true // 必须开启,否则监听不到
}
}
但路由变化不属于这种情况 ——$route
的引用会直接改变,因此无需深度监听。
总结
- 路由变化时,
$route
对象的引用会改变,而非内部属性修改,因此普通监听即可捕获。 deep: true
用于监听引用不变但内部属性修改的对象,与路由变化的特性不匹配。
因此,监测路由变化不需要开启深度监听。