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

在牟平等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶提供成都做網(wǎng)站、成都網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站建設(shè),營(yíng)銷(xiāo)型網(wǎng)站建設(shè),外貿(mào)網(wǎng)站制作,牟平網(wǎng)站建設(shè)費(fèi)用合理。

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)簽元素。如果在vue頁(yè)面中有多個(gè)元素節(jié)點(diǎn)。那么編譯時(shí)vue會(huì)在這些元素節(jié)點(diǎn)上添加一個(gè)標(biāo)簽。并且該標(biāo)簽不會(huì)出現(xiàn)在dom樹(shù)中。

Suspense(異步組件)

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

//創(chuàng)建一個(gè)異步組件

用Suspense包裹異步組件 async-component

    
      
    
    
      Loading ...
    
  

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

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // 工廠函數(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ì)用于移動(dòng)dom的層級(jí)

  
Hello Async Component