Vue3 用戶體驗的增長：異步組件與 Suspense 組件

做者：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                                 Size

dist/js/chunk-vendors.f11402df.js    82.39 KiB
dist/js/app.ada103fb.js              20.59 KiB
dist/js/ChatWindow.3c1708e4.js       5.47 KiB
dist/css/app.8221c481.css            1.76 KiB
dist/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... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。