最简单用法

vue3延迟加载(异步组件​)defineAsyncComponent_css

Index.vue:

<script setup>
import { onMounted, defineAsyncComponent } from 'vue'
import './index.css'

const Child = defineAsyncComponent(() => import('./Child.vue'))

onMounted(() => {})
</script>

<template>
  <div class="m-home-wrap">
    <Child> </Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

Child.vue:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>child</div>
</template>

高级用法

vue3延迟加载(异步组件​)defineAsyncComponent_css_02

Index.vue:

<script setup>
import { onMounted, defineAsyncComponent } from 'vue'
import LoadingComponent from './LoadingComponent.vue'
import ErrorComponent from './ErrorComponent.vue'
import './index.css'

const Child = defineAsyncComponent({
  loader: () => import('./Child.vue'),
  loadingComponent: LoadingComponent, //如果200毫秒后child组件对应js文件依然没有从服务器端下载下来，则显示此组件
  delay: 200,
  errorComponent: ErrorComponent, //如果3000毫秒后child组件对应js文件依然没有从服务器端下载下来，则显示此组件
  timeout: 3000,
})

onMounted(() => {})
</script>

<template>
  <div class="m-home-wrap">
    <Child> </Child>
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

Child.vue:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>child</div>
</template>

LoadingComponent.vue:

<script setup>
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>loading....</div>
</template>

ErrorComponent.vue:

<script setup>
import { onMounted, ref } from 'vue'

onMounted(() => {})
</script>

<template>
  <div>error</div>
</template>