Question

我正在尝试在组件中使用 vue3.0.0 延迟加载，但收到了一些警告。 当我想在父组件中获取特定组件时出现此错误。我的意思是当我单击以显示子组件时，我会出现以下错误。在错误下，我添加了我的代码。请帮我。我不是很专业。

runtime-core.esm-bundler.js?5c40:38 
[Vue warn]: Unhandled error during execution of setup function 
  at <AsyncComponentWrapper key=0 > 
  at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>
runtime-core.esm-bundler.js?5c40:38 
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <AsyncComponentWrapper key=0 > 
  at <Profile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
  at <RouterView> 
  at <App>

这个错误也

runtime-core.esm-bundler.js?5c40:2492 
Uncaught (in promise) TypeError: Cannot read property 'catch' of undefined
    at load (runtime-core.esm-bundler.js?5c40:2492)
    at setup (runtime-core.esm-bundler.js?5c40:2574)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7161)
    at setupComponent (runtime-core.esm-bundler.js?5c40:7117)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5115)
    at processComponent (runtime-core.esm-bundler.js?5c40:5090)
    at patch (runtime-core.esm-bundler.js?5c40:4684)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4999)
    at patchElement (runtime-core.esm-bundler.js?5c40:4960)

我的代码就像

<template>
  <div class="profile">
      <button @click="show = true"> show lazy loading</button>
      <Lazy v-if="show" />
  </div>
</template>

<script>
import { defineAsyncComponent, ref } from 'vue'

const Lazy = defineAsyncComponent(() => {
  import('../../components/frontend/Lazy.vue')
})
export default {
  components: {
    Lazy
  },
  setup(){
    const show = ref(false)
    return { show }
  }

}
</script>

我也在路由级别使用延迟加载

  {
    path: '/profile/:id',
    name: 'Profile',
    component: () => import('../views/frontend/Profile.vue')
  }

Answer 1

defineAsyncComponent 的回调需要返回导入组件定义的 Promise，但它目前什么都不返回：

const Lazy = defineAsyncComponent(() => {
  import('../../components/frontend/Lazy.vue')
  // ❌ returns nothing
})

您可以在回调中添加 return 语句：

const Lazy = defineAsyncComponent(() => {
  return import('../../components/frontend/Lazy.vue')
})

...或删除隐式返回的大括号：

const Lazy = defineAsyncComponent(() => import('../../components/frontend/Lazy.vue'))

未捕获（承诺）类型错误：无法读取未定义的属性“捕获”

1 个答案: