Vue3 用户体验的增加：异步组件与 Suspense 组件

Posted 2021-05-20 前端小智@大迁世界

作者：Matt Maribojoc
译者：前端小智
来源：stackabuse

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

懒加载组件是一种改善应用程序用户体验的简便方法，尤其是在我们的代码包很大或用户连接速度较慢的情况下。

Vue3引入了一些新功能，可通过改进异步组件API和新的Suspense组件来帮助我们实现友好的用户体验。

用户访问应用程序时，无需立即加载UI的某些部分，例如，诸如模态框和工具提示之类的动态UI功能。此外，如果我们使用的是单页面应用程序体系结构，则页面上的内容 看不见的页面也不应加载，直到需要为止。

示例

在此示例应用程序中，我们的应用程序显示一个ChatWindow组件，如果用户经过身份验证，该组件将加载。

我们假设只能在运行时确定身份验证，并且该组件很大。 由于这些原因，我们需要要懒加载它。

<template>
  <h3>Chat with friends here</h3>
  <chat-window v-if="auth" />
</template>
<script&