Vue3中的Fragment、Suspense、Portal特性是什么

這篇“Vue3中的Fragment、Suspense、Portal特性是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue3中的Fragment、Suspense、Portal特性是什么”文章吧。

vue3中新增了一些功能來解決vue2中那些戳中開發(fā)人員痛楚的詬病。同時，也對vue2中性能進行了優(yōu)化。本文帶你一起探討vue3中新增的Fragment、Teleport和Suspense的使用方法。

Fragment(碎片化節(jié)點)

不知道各位有沒有在vue2中遇到過下圖中的報錯信息：

這是vue2拋出的錯誤提示。意思是說組件只能有一個根元素。當我們新建一個vue頁面時，通常會有多個不同的元素節(jié)點。我們會在最外層包裹一個div來使其讓它成為這個頁面的根節(jié)點。但這并不友好。有時候我們并不需要這個div元素。

vue3中解決了這個問題。vue3中新增了一個類似dom的標簽元素<Fragment></Fragment>。如果在vue頁面中有多個元素節(jié)點。那么編譯時vue會在這些元素節(jié)點上添加一個<Fragment></Fragment>標簽。并且該標簽不會出現(xiàn)在dom樹中。

Suspense(異步組件)

vue3中提供一個<Suspense></Suspense>組件用于控制異步組件。

//創(chuàng)建一個異步組件
<script>
const { createApp,defineAsyncComponent } = Vue
const app = createApp({})
const AsyncComp = defineAsyncComponent(
    () =>
        new Promise((resolve, reject) => {
          setTimeout(() => resolve({
            template: '<div>I am async!</div>'
          }),3000)
        })
)
app.component('async-component', AsyncComp)
app.mount('#app')
</script>

用Suspense包裹異步組件 async-component

<Suspense>
    <template #default>
      <async-component />
    </template>
    <template #fallback>
      Loading ...
    </template>
  </Suspense>

上面的異步組件使用了定時器,3秒后顯示該組件 我們可以通過defineAsyncComponent提供一系列的參數(shù)來定義異步組件

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // 工廠函數(shù)
  loader: () => import('./Foo.vue'),
  // 加載異步組件時要使用的組件
  loadingComponent: LoadingComponent,
  // 加載失敗時要使用的組件
  errorComponent: ErrorComponent,
  // 在顯示 loadingComponent 之前的延遲 | 默認值：200（單位 ms）
  delay: 200,
  // 如果提供了 timeout ，并且加載組件的時間超過了設定值，將顯示錯誤組件
  // 默認值：Infinity（即永不超時，單位 ms）
  timeout: 3000,
  // 定義組件是否可掛起 | 默認值：true
  suspensible: false,
  /**
   *
   * @param {*} error 錯誤信息對象
   * @param {*} retry 一個函數(shù)，用于指示當 promise 加載器 reject 時，加載器是否應該重試
   * @param {*} fail  一個函數(shù)，指示加載程序結束退出
   * @param {*} attempts 允許的最大重試次數(shù)
   */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 請求發(fā)生錯誤時重試，最多可嘗試 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一樣：
      // 必須調(diào)用其中一個才能繼續(xù)錯誤處理。
      fail()
    }
  }
})

當配置項中的suspensible為true時，被Suspense包裹的異步組件將會被控制

Portal(傳送門)

在vue2中我們可能會使用例如element-ui,iview等組件庫,有時候我們會發(fā)現(xiàn)這些ui組件庫中的某些組件渲染層級并不包含在vue dom中。如 modal toast等組件的層級就在vue dom 之外。這種在vue之外的層級方便我們進行全局處理和管理。vue3中提供一對<teleport ></teleport>用于移動dom的層級

<div id="app">
  <h2>Hello Async Component</h2>
  <com-a />
</div>
<div class="i-can-fly"></div>
// 組件a
const { createApp } = Vue
const componentA = {
 template: `<com-b><com-b/><div class="i-can-fly">我能瞬間移動</div>`
 }
const componentB ={
template: `<div class="i-can-fly">我能飛</div>`
}
const app = createApp({})
app.component('com-b',componentB)
app.component('com-a',componentA)
app.mount('#app')

此時我們打開控制臺查看元素

渲染的結果如下。然后我們修改代碼添加teleport標簽

<div id="app">
   <----...--->
  <teleport to=".i-can-fly">
    <com-a />
  </teleport>
</div>
<div class="i-can-fly"></div>

此時我們發(fā)現(xiàn)組件B已經(jīng)不在app中了。而是出現(xiàn)在了以類選擇器為i-can-fly的div中。

值得注意的是 teleport標簽上的to參數(shù)表示要將包裹的內(nèi)容所移動到的位置。

以上就是關于“Vue3中的Fragment、Suspense、Portal特性是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。