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 用于监听引用不变但内部属性修改的对象,与路由变化的特性不匹配。

因此,监测路由变化不需要开启深度监听。

你可能感兴趣的:(vue.js,javascript,前端)