Vue3 异步组件defineAsyncComponent_defineasynccomponent加载服务器上的组件

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能。

使用异步组件对应用进行优化

当用户首次打开一个应用时，如果所有的页面都进行同步加载，会很影响首页的打开速度，此时我们可以使用异步加载的方式，不需要在首页中展示的内容可以配置为异步组件

当应用中有一个超大超复杂的组件时，我们可以使用异步组件，在这个超大组件被渲染前，可以把它打包为一个很小的块，在需要时再去动态加载这个小块

一个简单的小栗子，单文件中异步加载组件

<template>
  <div class="box">
    <div>这是一个需要单文件异步加载的组件</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: aquamarine;
}
</style>

<template>
  <div class="box">
    <div>异步组件加载失败</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(89, 105, 100);
}
</style>

<template>
  <div class="box">
    <div>异步组件加载中...</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(166, 243, 219);
}
</style>

<template>
  <div class="box">
    <div class="intro">在单文件中加载异步组件</div>
    <div class="btn" @click="importAsyncComponent">点击加载异步组件</div>
  </div>
</template>getCurrentInstance, 
<script setup>
import { defineAsyncComponent, ref } from 'vue'
import ErroComponent from './component/Error.vue'
import LoadingComponent from './component/Loading.vue'

// 单文件中异步加载组件
const AsyncComponent = defineAsyncComponent({
  // 加载函数
  loader: () => import('./component/index.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,

  // 展示加载组件前的延迟时间，默认为200ms,注：这里如果设置的时间过短，会有闪烁的效果
  delay: 200,

  // 加载失败后显示的组件
  errorComponent: ErroComponent,

  // 如果提供了一个timeout时间限制，并且超时了，也会展示这里的报错组件
  // 设置加载超时时间为3000毫秒
  timeout: 3000
})

const isImport = ref(false);
const importAsyncComponent = () => {
  console.log("点击加载异步组件");
  isImport.value = true;
}

</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 30px;
  background-color: antiquewhite;
}
.btn {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: orange;
}
.intro {
  margin: 30px;
  padding: 15px;
}
</style>

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

)]

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】