Vue માં Suspense કમ્પોનેન્ટ શું છે?

Question

Accepted Answer

`` એક બિલ્ટ-ઇન કમ્પોનેન્ટ છે જે તેના કમ્પોનેન્ટ ટ્રીમાં **async અવલંબितાઓ** સંકલન કરે છે — તે ફોલબેક (લોડિંગ UI) બતાવે છે જ્યાં સુધી તમામ નેસ્ટેડ async ક્રિયાઓ હલ ન થાય, પછી વાસ્તવિક સામગ્રી પ્રદર્શિત કરે છે. તે મેન્યુઅલ `isLoading` બોઈલરપ્લેટને દૂર કરે છે. ## તે શા માટે મહત્વપૂર્ણ છે ```vue ``` ## તે async setup() / top-level await સાથે કાર્ય કરે છે ```vue ``` સામાન્ય રીતે કમ્પોનેન્ટ લોડિંગ સ્ટેટ ન સંચાલીને setup માં `await` કરી શકતું નથી. `` બાળકને **top-level `await`** (અથવા async `setup`) ઉપયોગ કરવા દે છે, અને પેરેન્ટ Suspense તેના માટે લોડિંગ સ્ટેટ સંભાળે છે — બાળકનો કોડ સ્વચ્છ રહે છે, ફક્ત તેના ડેટાની `await` કરે છે. ## તે બધી નેસ્ટેડ async અવલંબितાઓની રાહ જુએ છે ```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). ``` ## ભૂલો સંભાળવી ```vue ``` Suspense ને error boundary (`onErrorCaptured`) સાથે જોડો તાકે નિષ્ફળ async setups સંભાળી શકો, કારણ કે Suspense પોતે માત્ર લોડિંગ/લોડેડ ટ્રાન્ઝિશન સંભાળે છે. ## સ્ટેટસ નોટ ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## તે શા માટે મહત્વપૂર્ણ છે `` async લોડિંગ સ્ટેટ્સને ઘોષણાત્મક રીતે સંકલન કરે છે — કમ્પોનેન્ટ્સને તેમના ડેટાને સીધો `await` કરવા દે છે જ્યારે એક એક પૂર્વજ એક ફોલબેક બતાવે છે જ્યાં સુધી બધું તૈયાર ન થાય. તે વિખરાયેલ `isLoading` ફ્લેગ અને બહુવિધ સ્પિનર્સને દૂર કરે છે, અને Nuxt જેવા ફ્રેમવર્ક્સમાં ડેટા ફેચિંગને આધાર આપે છે. તે જાણવું કે તે અસ્તિત્વમાં છે (અને તે હજી પણ પ્રાયોગિક છે, error boundary સાથે શ્રેષ્ठ રીતે જોડાયેલ છે) સ્વચ્છ async UI માટે ઉપયોગી છે, ખાસ કરીને SSR/data-heavy એપ્લિકેશનમાં.