本篇文章帶大家了解一下Vue3中的3個(gè)新特性Fragment（碎片化節(jié)點(diǎn)）、Suspense（異步組件）、Portal（傳送門(mén)），希望對(duì)大家有所幫助。

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

Fragment(碎片化節(jié)點(diǎn))

不知道各位有沒(méi)有在vue2中遇到過(guò)下圖中的報(bào)錯(cuò)信息：

這是vue2拋出的錯(cuò)誤提示。意思是說(shuō)組件只能有一個(gè)根元素。當(dāng)我們新建一個(gè)vue頁(yè)面時(shí)，通常會(huì)有多個(gè)不同的元素節(jié)點(diǎn)。我們會(huì)在最外層包裹一個(gè)div來(lái)使其讓它成為這個(gè)頁(yè)面的根節(jié)點(diǎn)。但這并不友好。有時(shí)候我們并不需要這個(gè)div元素。

vue3中解決了這個(gè)問(wèn)題。vue3中新增了一個(gè)類(lèi)似dom的標(biāo)簽元素<Fragment></Fragment>。如果在vue頁(yè)面中有多個(gè)元素節(jié)點(diǎn)。那么編譯時(shí)vue會(huì)在這些元素節(jié)點(diǎn)上添加一個(gè)<Fragment></Fragment>標(biāo)簽。并且該標(biāo)簽不會(huì)出現(xiàn)在dom樹(shù)中。

Suspense(異步組件)

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

//創(chuàng)建一個(gè)異步組件 <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>

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

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

當(dāng)配置項(xiàng)中的suspensible為true時(shí)，被Suspense包裹的異步組件將會(huì)被控制

Portal(傳送門(mén))

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

<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">我能瞬間移動(dòng)</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')

此時(shí)我們打開(kāi)控制臺(tái)查看元素

渲染的結(jié)果如下。然后我們修改代碼添加teleport標(biāo)簽

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

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

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

【