რა არის Vue-ში Suspense კომპონენტი?

Question

Accepted Answer

`` არის ჩამონტაჟებული კომპონენტი, რომელიც კოორდინირებს **ასინქრონული დამოკიდებულებებს** მის კომპონენტის ხეში — ის აჩვენებს ფელბაკს (ტვირთვის UI) სანამ ყველა ჩადგმული ასინქრონული ოპერაცია სრულდება, შემდეგ აჩვენებს რეალურ შიგთავსს. ის ამოთავსებს ხელით `isLoading` boilerplate-ს. ## ორი სლოტი ```vue ``` ## ეს მუშაობს async setup()-თან / top-level await-თან ```vue ``` ჩვეულებრივ კომპონენტი არ შეიძლება `await` დაამუშაოს setup-ში ტვირთვის მდგომარეობის მართვის გარეშე. `` საშუალებას აძლევს ბავშვის კომპონენტს გამოიყენოს **top-level `await`** (ან async `setup`), და მშობელი Suspense აკონტროლებს მის ტვირთვის მდგომარეობას — ბავშვის კოდი რჩება სუფთა, უბრალოდ `await`-ით მისი მონაცემების. ## ის ელოდება ᲧᲕᲔᲚᲐ ჩადგმულ ასინქრონულ დამოკიდებულებებს ```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`) ასინქრონული setup-ის წარუმატებელი პასუხების დასამუშავებლად, რადგან Suspense თავისთავად მხოლოდ ტვირთვის/დატვირთული ტრანზიციას აკონტროლებს. ## სტატუსის შენიშვნა ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## რატომ არის ეს მნიშვნელოვანი `` დეკლარაციულად კოორდინირებს ასინქრონული ტვირთვის მდგომარეობებს — კომპონენტებს საშუალებას აძლევს `await`-ის უშუალოდ მათი მონაცემები ხელმისაწვდომი წელს ერთი მშობელი აჩვენებს ერთ ფელბაკს სანამ ყველაფერი მზად არის. ის აღმოფხვრის გაფანტულ `isLoading` ფლაგებს და მრავალ სპინერებს, და ეფუძნება მონაცემთა გამოკიდის მუშაობას Nuxt-ს მსგავსი ფრეიმვორკებში. მის არსებობის ცოდნა (და რომ ის ჯერ კიდევ ექსპერიმენტულია, საუკეთესოდ შეწყვილებული error boundary-ს) მომსახურე ხელმისაწვდომია სუფთა ასინქრონული UI-ს, განსაკუთრებით SSR/მონაცემების უამრავი აპლიკაციებში.