久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      快速了解Vue3中的Fragment、Suspense、Portal特性

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

      快速了解Vue3中的Fragment、Suspense、Portal特性

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

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

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

      快速了解Vue3中的Fragment、Suspense、Portal特性

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

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

      快速了解Vue3中的Fragment、Suspense、Portal特性

      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秒后顯示該組件 我們可以通過defineAsyncComponent提供一系列的參數(shù)來定義異步組件

      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í)間超過了設(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(傳送門)

      在vue2中我們可能會(huì)使用例如element-ui,iview等組件庫,有時(shí)候我們會(huì)發(fā)現(xiàn)這些ui組件庫中的某些組件渲染層級(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í)我們打開控制臺(tái)查看元素

      快速了解Vue3中的Fragment、Suspense、Portal特性

      渲染的結(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)在了以類選擇器為i-can-fly的div中。

      快速了解Vue3中的Fragment、Suspense、Portal特性

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

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)