Vue 3.0 動態(tài)組件&異步組件

該頁面假設(shè)你已經(jīng)閱讀過了組件基礎(chǔ)。如果你還對組件不太了解，推薦你先閱讀它。

#在動態(tài)組件上使用 keep-alive

我們之前曾經(jīng)在一個多標(biāo)簽的界面中使用 is attribute 來切換不同的組件：

<component :is="currentTabComponent"></component>

當(dāng)在這些組件之間切換的時候，你有時會想保持這些組件的狀態(tài)，以避免反復(fù)重渲染導(dǎo)致的性能問題。例如我們來展開說一說這個多標(biāo)簽界面：

點擊此處實現(xiàn)

你會注意到，如果你選擇了一篇文章，切換到 Archive 標(biāo)簽，然后再切換回 Posts，是不會繼續(xù)展示你之前選擇的文章的。這是因為你每次切換新標(biāo)簽的時候，Vue 都創(chuàng)建了一個新的 currentTabComponent 實例。

重新創(chuàng)建動態(tài)組件的行為通常是非常有用的，但是在這個案例中，我們更希望那些標(biāo)簽的組件實例能夠被在它們第一次被創(chuàng)建的時候緩存下來。為了解決這個問題，我們可以用一個 <keep-alive> 元素將其動態(tài)組件包裹起來。

<!-- 失活的組件將會被緩存！-->
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>

來看看修改后的結(jié)果：

點擊此處實現(xiàn)

現(xiàn)在這個 Posts 標(biāo)簽保持了它的狀態(tài) (被選中的文章) 甚至當(dāng)它未被渲染時也是如此。你可以在這個示例查閱到完整的代碼。

你可以在 API 參考文檔查閱更多關(guān)于 <keep-alive> 的細節(jié)。

#異步組件

在大型應(yīng)用中，我們可能需要將應(yīng)用分割成小一些的代碼塊，并且只在需要的時候才從服務(wù)器加載一個模塊。為了簡化，Vue 有一個 defineAsyncComponent 方法：

const app = Vue.createApp({})
const AsyncComp = Vue.defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)
app.component('async-example', AsyncComp)

如你所見，此方法接受返回 Promise 的工廠函數(shù)。從服務(wù)器檢索組件定義后，應(yīng)調(diào)用 Promise 的 resolve 回調(diào)。你也可以調(diào)用 reject(reason)，以指示加載失敗。

你也可以在工廠函數(shù)中返回一個 Promise，所以把 webpack 2 和 ES2015 語法加在一起，我們可以這樣使用動態(tài)導(dǎo)入：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)

當(dāng)在本地注冊組件時，你也可以使用 defineAsyncComponent

import { createApp, defineAsyncComponent } from 'vue'
createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

#與 Suspense 一起使用

異步組件在默認(rèn)情況下是可掛起的。這意味著如果它在父鏈中有一個 <Suspense>，它將被視為該 <Suspense> 的異步依賴。在這種情況下，加載狀態(tài)將由 <Suspense> 控制，組件自身的加載、錯誤、延遲和超時選項將被忽略。

異步組件可以選擇退出 Suspense 控制，并通過在其選項中指定 suspensable:false，讓組件始終控制自己的加載狀態(tài)。

你可以在中查看可用選項的列表 API 參考