Kas yra Suspense komponentas Vue?

Question

Accepted Answer

`` yra integruotas komponentas, koordinuojantis **asinchronines priklausomybes** jo komponentų medyje — jis rodo atsarginį variantą (įkrovimo UI), kol visos įdėtos asinchronines operacijos baigiamos, tada rodomas tikrasis turinys. Jis pašalina rankinį `isLoading` šabloną. ## Du lizdai ```vue ``` ## Jis veikia su async setup() / top-level await ```vue ``` Paprastai komponentas negali `await` setup metu be įkrovimo būsenos valdymo. `` leidžia vaikui naudoti **top-level `await`** (arba asinchroninį `setup`), o tėvinis Suspense jam tvarko įkrovimo būseną — vaiko kodas lieka švaras, tiesiog `await`ina jo duomenis. ## Jis laukia VISŲ įdėtų asinchroninių priklausomybių ```text waits for every async setup in its subtree to resolve, then swaps the fallback for the real content in one go (avoids a cascade of separate spinners). ``` ## Klaidų tvarkymas ```vue ``` Suporuokite Suspense su klaidos riba (`onErrorCaptured`), kad būtų tvarkomi nepavykę asinchroniniai setups, nes pats Suspense tik tvarko įkrovimo/įkelto perėjimą. ## Būsenos pastaba ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Kodėl tai svarbu `` deklaratyviai koordinuoja asinchronines įkrovimo būsenas — leidžiant komponentams `await`inti jų duomenis tiesiogiai, o vienas protėvis rodo vieną atsarginį variantą, kol viskas paruošta. Jis eliminuoja išsklaidytus `isLoading` žymeklius ir kelis sukinėjimus, ir yra pagrindinis duomenų gavinimui tokiuose rėmuose kaip Nuxt. Žinoti, kad jis egzistuoja (ir kad jis dar yra eksperimentinis, geriausiai suporuotas su klaidos riba) yra naudinga švariuose asinchroniniuose UI, ypač SSR/duomenų gausiose programose.