偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

Vue.js 3.0 的 Suspense組件簡(jiǎn)介

開(kāi)發(fā) 前端
Suspense組件是Vue3中的知名功能之一,值得慶幸的是,Suspense組件非常容易理解,它們甚至不需要任何額外的導(dǎo)入!

Suspense組件是Vue3中的知名功能之一。

它們?cè)试S我們的應(yīng)用程序在等待異步組件時(shí)渲染一些后備內(nèi)容,可以讓我們創(chuàng)建一個(gè)平滑的用戶體驗(yàn)。

值得慶幸的是,Suspense組件非常容易理解,它們甚至不需要任何額外的導(dǎo)入!

本文內(nèi)容:

  • 什么是Suspense組件
  • 何時(shí)使用它
  • 如何使用
Vue.js 3.0 的 Suspense組件簡(jiǎn)介

Suspense組件到底是什么?

Suspense組件用于在等待某個(gè)異步組件解析時(shí)顯示后備內(nèi)容。

你可能會(huì)想我們會(huì)在什么時(shí)候使用異步組件?

老實(shí)說(shuō),超出你的想象。每當(dāng)我們希望組件等待數(shù)據(jù)獲取時(shí)(通常在異步API調(diào)用中),我們都可以使用Vue3 Composition API制作異步組件。

以下是異步組件有用的一些實(shí)例:

  • 在頁(yè)面加載之前顯示加載動(dòng)畫
  • 顯示占位符內(nèi)容
  • 處理延遲加載的圖像

以前,在Vue2中,我們必須使用條件(例如 v-if 或 v-else)來(lái)檢查我們的數(shù)據(jù)是否已加載并顯示后備內(nèi)容。

但是現(xiàn)在,Suspense隨Vue3內(nèi)置了,因此我們不必?fù)?dān)心跟蹤何時(shí)加載數(shù)據(jù)并呈現(xiàn)相應(yīng)的內(nèi)容。

[[342258]]

好吧...那我們?nèi)绾螌?shí)現(xiàn)Suspense

在這個(gè)例子中,我們有一個(gè)異步的 ArticleInfo.vue 組件。由于本文的重點(diǎn)是Suspense,而不是Composition API,因此,不會(huì)對(duì)這些細(xì)節(jié)進(jìn)行瘋狂的詳細(xì)介紹。如果您對(duì)更完整的Composition API教程感興趣,請(qǐng)參閱此處。

簡(jiǎn)而言之,只需知道 setup 方法可以像其他方法一樣被設(shè)置為異步的。

對(duì)于我們的示例,ArticleInfo將具有異步 setup 方法,該方法將在返回之前加載用戶數(shù)據(jù)。

  1. async function getArticleInfo() { 
  2.   // 一些異步API調(diào)用 
  3.   return { article } 
  4. }export default { 
  5.   async setup () {    var { article } = await getArticleInfo() 
  6.     return { 
  7.       article    }  }} 

然后,假設(shè)我們有一個(gè) ArticlePost.vue 組件,其中包含我們的ArticleInfo組件。

如果我們要在等待組件獲取數(shù)據(jù)并解析時(shí)顯示“正在拼了命的加載…”之類的內(nèi)容,則只需三個(gè)步驟即可實(shí)現(xiàn)Suspense。

  • 將異步組件包裝在<template #default>標(biāo)記中
  • 在我們的Async組件的旁邊添加一個(gè)兄弟姐妹,標(biāo)簽為<template #fallback>。
  • 將兩個(gè)組件都包裝在<suspense>組件中

使用插槽,Suspense將渲染后備內(nèi)容,直到默認(rèn)內(nèi)容準(zhǔn)備就緒。然后,它將自動(dòng)切換以顯示我們的異步組件。

看起來(lái)會(huì)像這樣。

  1. <Suspense> 
  2.   <template #default> 
  3.     <article-info/> 
  4.   </template> 
  5.   <template #fallback> 
  6.     <div>正在拼了命的加載…</div> 
  7.   </template> 
  8. </Suspense> 

你還可以捕獲組件錯(cuò)誤

Vue的另一個(gè)很酷的功能,尤其是當(dāng)我們開(kāi)始使用異步組件時(shí),可以捕獲錯(cuò)誤并向用戶顯示一些錯(cuò)誤消息。

即使在Vue2中,也可以使用 errorCaptured 鉤子函數(shù)實(shí)現(xiàn),但是在Vue3中,它已重命名為 onErrorCaptured。

無(wú)論調(diào)用什么,此鉤子函數(shù)都會(huì)在捕獲到任何后代組件的錯(cuò)誤時(shí)運(yùn)行。如果出現(xiàn)問(wèn)題,我們可以將其與Suspense一起使用以渲染錯(cuò)誤。

如果我們處理了一個(gè)錯(cuò)誤以顯示錯(cuò)誤消息,則上面的組件將是這樣。

  1. <template> 
  2.   <div v-if="errMsg"> {{ errMsg }} </div> 
  3.   <Suspense v-else> 
  4.     <template #default> 
  5.       <article-info/> 
  6.     </template> 
  7.     <template #fallback> 
  8.       <div>正在拼了命的加載…</div> 
  9.     </template> 
  10.   </Suspense> 
  11. </template> 
  12. <script> 
  13. import { onErrorCaptured } from 'vue' 
  14. setup () { 
  15.   const errMsg = ref(null) 
  16.   onErrorCaptured(e => { 
  17.     errMsg.value = '呃,出了點(diǎn)問(wèn)題!' 
  18.     return true 
  19.   })} 
  20.   return { error } 
  21. </script> 

Vue.js 3.0 的 Suspense組件簡(jiǎn)介

結(jié)束

Suspense只是Vue使開(kāi)發(fā)人員更容易解決常見(jiàn)問(wèn)題的另一種方式。不必有條件地渲染組件,我們只需使用Suspense來(lái)為我們處理事情。

我認(rèn)為,這是Vue3中最簡(jiǎn)潔的功能之一。

現(xiàn)在,你應(yīng)該對(duì)Vue中的Suspense組件有了更多的了解,并且已經(jīng)想到了一些很酷的方法來(lái)開(kāi)始將它們實(shí)現(xiàn)到你的項(xiàng)目中!

 

責(zé)任編輯:趙寧寧 來(lái)源: 今日頭條
相關(guān)推薦

2017-07-11 18:00:21

vue.js數(shù)據(jù)組件

2020-09-28 17:45:03

Vue.js 3.0前端代碼

2022-04-25 07:36:21

組件數(shù)據(jù)函數(shù)

2019-05-29 14:23:53

Vue.js組件通信

2023-10-12 12:43:16

組件Vue

2021-05-18 07:51:37

Suspense組件Vue3

2022-04-26 05:55:06

Vue.js異步組件

2025-01-14 15:12:13

2018-01-31 15:45:07

前端Vue.js組件

2020-06-02 14:00:53

Vue.js組件Web開(kāi)發(fā)

2020-04-07 09:43:17

vue.js進(jìn)度組件開(kāi)發(fā)

2017-07-04 17:55:37

Vue.js插件開(kāi)發(fā)

2016-11-04 19:58:39

vue.js

2018-04-04 10:32:13

前端JavascriptVue.js

2017-08-30 17:10:43

前端JavascriptVue.js

2018-07-10 15:35:33

Vue前端架構(gòu)

2022-01-19 22:18:56

Vue.jsVue SPA開(kāi)發(fā)

2016-11-01 19:10:33

vue.js前端前端框架

2017-07-14 10:10:08

Vue.jsMixin

2021-01-22 11:47:27

Vue.js響應(yīng)式代碼
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)