Vue3用户体验提升：异步组件与悬念组件

延迟加载组件是改善应用程序用户体验的一种简单方法，尤其是当我们的代码包很大或我们的用户连接速度较慢时。Vue3引入了一些新特性，通过改进异步组件API和新的Suspense组件来帮助我们实现友好的用户体验。UI的某些部分不需要在用户访问应用程序时立即加载，例如模态框和工具提示等动态UI功能。此外，如果我们使用单页应用程序架构，则不可见页面上的内容应在需要时才加载。示例在此示例应用程序中，我们的应用程序显示一个ChatWindow组件，如果用户通过身份验证，该组件将加载。我们假设身份验证只能在运行时确定，并且这个组件很大。由于这些原因，我们需要延迟加载它。使用Vue3异步组件API实现懒加载Vue3引入了defineAsyncComponentAPI，实现组件的懒加载非常简单。defineAsyncComponent可以接受返回Promise的工厂函数。Promise的resolve回调应该在服务端返回组件定义后调用。您还可以调用reject(reason)来指示加载失败。构建后，任何动态导入的组件都将被视为一个单独的文件。FileSizedist/js/chunk-vendors.f11402df.js82.39KiBdist/js/app.ada103fb.js20.59KiBdist/js/ChatWindow.3c1708e4.js5.47KiBdist/css/app.8221c481.css1.76KiBdist/Windows3s/Chat17css2.75KiBloading-state内容延迟加载的缺点是需要团队沟通，多次请求导致渲染不均匀。处理此问题的一种方法是在组件加载时显示加载状态组件。如下图所示，在组件加载的时候，我们展示一个加载界面，加载完成之后再展示加载的组件内容。defineAsyncComponent可以接受一个对象：里面有一个loadingComponent属性，表示加载异步组件时要使用的组件。上面使用loading-state的方法在Suspense上效果很好，但有点受限。例如，我们可能想将props传递给加载状态组件，将内容传递给它的插槽等，这对于异步组件API来说并不容易做到。为了增加灵活性，我们可以使用Vue3中新的Suspense组件。这允许我们使用插槽来确定在模板级别异步加载的内容。Suspense是一个全局组件（类似于过渡），可以在Vue3应用程序的任何地方使用。要使用它，您需要在模板中声明它并包含两个命名插槽：默认和回退。Suspense将确保在加载异步内容时显示默认插槽，并为加载状态使用回退插槽。默认情况下，异步组件是可挂起的。这意味着如果它在父链中有一个，它将被认为是一个异步依赖。在这种情况下，加载状态将被控制，组件自身的加载、错误、延迟和超时选项将被忽略。异步组件可以选择退出Suspense控制，并可以在其选项中指定sustainable:false让组件始终控制自己的加载状态。您可以在API参考中看到更多可用选项。~完了，我是小智，我要去SPA了，下次见！作者：MattMaribojoc译者：前端小智来源：stackabusesuspense/本文转载自微信公众号“大招天下”，可通过以下二维码关注。转载本文请联系大千世界公众号。