本篇文章帶大家了解一下Vue3中的3個新特性Fragment（碎片化節點）、Suspense（異步組件）、Portal（傳送門），希望對大家有所幫助。

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

Fragment(碎片化節點)

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

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

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

Suspense(異步組件)

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

//創建一個異步組件 <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提供一系列的參數來定義異步組件

import { defineAsyncComponent } from 'vue'  const AsyncComp = defineAsyncComponent({   // 工廠函數   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 一個函數，用于指示當 promise 加載器 reject 時，加載器是否應該重試    * @param {*} fail  一個函數，指示加載程序結束退出    * @param {*} attempts 允許的最大重試次數    */   onError(error, retry, fail, attempts) {     if (error.message.match(/fetch/) && attempts <= 3) {       // 請求發生錯誤時重試，最多可嘗試 3 次       retry()     } else {       // 注意，retry/fail 就像 promise 的 resolve/reject 一樣：       // 必須調用其中一個才能繼續錯誤處理。       fail()     }   } })

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

Portal(傳送門)

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

<div id="app">   <h1>Hello Async Component</h1>   <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>

此時我們發現組件B已經不在app中了。而是出現在了以類選擇器為i-can-fly的div中。

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

【