Vue3警告[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance.

本文介绍了在Vue3中遇到的一个警告问题,即在使用watch监听useRoute时会触发深度遍历,导致性能开销。为了解决这个问题,建议改用计算属性或watchEffect,并提供了相应的代码示例。通过计算属性重写可以更高效地获取路由参数,而使用watchEffect则避免了深度监视,仅在必要时更新状态。
摘要由CSDN通过智能技术生成

在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 = ''
      }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值