作者：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>import ChatWindow from "@/components/ChatWindow";export default {  components: {    ChatWindow  },  ...}</script>

应用Vue3异步组件API进行懒加载

Vue 3引入了defineAsyncComponent API，所以实现懒加载组件是非常简单的。

defineAsyncComponent 能够承受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调用。你也能够调用 reject(reason) 来示意加载失败。

<script>import { defineAsyncComponent } from "vue";const ChatWindow = defineAsyncComponent(  () => import("@/components/ChatWindow"));export default {  components: {    ChatWindow  },  ...}</script>

构建后，任何动静导入的组件都会作为一个独自的文件。

File                                 Sizedist/js/chunk-vendors.f11402df.js    82.39 KiBdist/js/app.ada103fb.js              20.59 KiBdist/js/ChatWindow.3c1708e4.js       5.47 KiBdist/css/app.8221c481.css            1.76 KiBdist/css/ChatWindow.f16731cd.css     2.75 KiB

loading-state 内容

懒加载的毛病是须要团队交换，屡次申请造成渲染参差不齐。解决此问题的一种办法加载组件时显示 loading-state组件。

如下图所示，组件在加载时，咱们显示一个 loading 画面，加载后在显示加载的组件内容。

defineAsyncComponent 能够承受一个对象：其中有个 loadingComponent 属性，示意加载异步组件时要应用的组件。

<script>import { defineAsyncComponent } from "vue";import Spinner from "@/components/Spinner.vue";const ChatWindow = defineAsyncComponent({  loader: () => import("@/components/ChatWindow"),  loadingComponent: Spinner});export default {  components: {    ChatWindow  },  ...}</script>

与 Suspense 一起应用

下面应用loading-state的办法成果是挺好的，但有一点限度。 例如，咱们可能心愿将prop传递到加载状态组件，将内容传递到其插槽等，而应用异步组件API则不容易实现。

为了减少灵活性，咱们能够应用Vue3中新出Suspense组件。这使咱们可能应用插槽确定模板级别的异步加载内容。

Suspense 是全局组件（例如transition），能够在Vue 3应用程序中的任何地位应用。 要应用它，须要在模板中申明它，并包含两个命名的插槽：default和fallback。

Suspense 会确保在加载异步内容时显示默认插槽，并将fallback 插槽用作加载状态。

<template>  <Suspense>    <template #default>      <h3>Chat with friends here</h3>      <chat-window />    </template>    <template #fallback>      <spinner color="blue" />    </template>  </Suspense></template><script>import { defineAsyncComponent } from "vue";import Spinner from "@/components/Spinner.vue";const ChatWindow = defineAsyncComponent(  () => import("@/components/ChatWindow"));export default {  components: {    ChatWindow,    Spinner  },  ...}</script>

异步组件在默认状况下是可挂起的。这意味着如果它在父链中有一个 <Suspense>，它将被视为该 <Suspense> 的异步依赖。在这种状况下，加载状态将由 <Suspense> 管制，组件本身的加载、谬误、提早和超时选项都将被疏忽。

异步组件能够抉择退出 Suspense 管制，并能够在其选项中指定 suspensible:false，让组件始终管制本人的加载状态。

你能够在 API 参考查看更多可用的选项。

~完，我是小智，去SPA了，下期见！

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://vuejsdevers.com/2020/...

交换

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

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。