详解如何在Vue3中实现懒加载组件

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

npm install -g @vue/cli

vue create my-vue-app
cd my-vue-app

<template>
  <div>
    <h2>懒加载的组件</h2>
    <p>这是一个在需要时加载的组件！</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

<template>
  <div id="app">
    <h1>欢迎来到我的 Vue 3 应用</h1>
    <button @click="loadComponent">加载懒加载组件</button>
    <component v-if="isComponentVisible" :is="AsyncComponent"></component>
  </div>
</template>

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

export default defineComponent({
  name: 'App',
  setup() {
    const isComponentVisible = ref(false)

    const AsyncComponent = defineAsyncComponent(() =>
      import('./components/MyComponent.vue')
    )

    const loadComponent = () => {
      isComponentVisible.value = true
    }

    return {
      isComponentVisible,
      AsyncComponent,
      loadComponent
    }
  }
})
</script>

<style>
#app {
  text-align: center;
}
button {
  margin: 20px;
}
</style>

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: {
    template: `<div>加载中...</div>`
  },
  errorComponent: {
    template: `<div>加载失败，请稍后再试。</div>`
  },
  delay: 200,  // 延迟显示 loading 组件的时间
  timeout: 3000 // 超时设置
})