VUE3-异步组件的使用（21）

原创

于 2022-03-14 23:07:16 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨了Vue3中异步组件的使用，以提高网页加载速度和用户体验。通过在父组件App.vue引入占位符，待子组件ChildComponent.vue异步加载完成后再展示，从而实现页面部分组件的按需加载。尽管在2022年3月14日仍有控制台输出，但这种技术能显著改善加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要使用异步组件？因为以前页面的加载是当所有组件加载完毕，然后页面一下子全部加载，如果用户网速慢的话就需要等待一定的时间才能看到东西出现在页面，有了异步组件后，我们可以让已经加载完的组件先出现在页面，然后用suspense标签以占位，用提示信息占位还没加载的组件，这样可以改善用户体验，但是在2022年3月14日时，控制台还是会输出<Suspense> is an experimental feature and its API will likely change.意思是“<suspend>”是一个实验性功能，其API可能会发生变化。

文章目录

父组件App.vue

<template>
  <div>
    <h1>这是父组件</h1>

    <!-- 用suspense包裹异步组件 -->
    <suspense>

      <!-- 组件显示正常时加载 -->
      <template v-slot:default>
        <ChildComponent></ChildComponent>
      </template>

      <!-- 组件显示缓慢时加载 -->
      <template