在Vue3中使用watch监听useRoute()的时候,控制台报出警告:
[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.
watch(route)是隐式的deep:true,它遍历任意深度的属性。所以从技术上来说,这是预期的行为。另外,当您只关心几个属性时,深入遍历复杂对象是浪费的。
您的用例可以而且应该改为使用计算属性重写:
const id = computed(() => {
return Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
如果必须使用watcher,还应使用watchEffect并避免深度监视:
watchEffect(() => {
if (route.path === '/home') {
state.firstPage = '/home'
state.activePath = ''
}