Τι είναι το Suspense component στο Vue;

Question

Accepted Answer

`` είναι ένα ενσωματωμένο component που συντονίζει **ασύγχρονες εξαρτήσεις** στο δέντρο των components του — εμφανίζει ένα fallback (loading UI) έως ότου όλες οι ενσωματωμένες ασύγχρονες λειτουργίες επιλυθούν, και στη συνέχεια εμφανίζει το πραγματικό περιεχόμενο. Αφαιρεί το χειροκίνητο `isLoading` boilerplate. ## Τα δύο slots ```vue ``` ## Λειτουργεί με async setup() / top-level await ```vue ``` Συνήθως ένα component δεν μπορεί να `await` στο setup χωρίς να διαχειρίζεται την κατάσταση φόρτωσης. `` επιτρέπει σε ένα child component να χρησιμοποιήσει **top-level `await`** (ή async `setup`), και το parent Suspense διαχειρίζεται την κατάσταση φόρτωσης γι' αυτό — ο κώδικας του child παραμένει καθαρός, απλώς `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`) για να χειρίσετε αποτυχημένα ασύγχρονα setups, καθώς το Suspense το ίδιο διαχειρίζεται μόνο τη μετάβαση loading/loaded. ## Σημείωση κατάστασης ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Γιατί έχει σημασία `` συντονίζει δηλωτικά ασύγχρονες καταστάσεις φόρτωσης — επιτρέπει στα components να `await` τα δεδομένα τους απευθείας ενώ ένας μόνο πρόγονος εμφανίζει ένα fallback έως ότου όλα είναι έτοιμα. Εξαλείφει τις διάσπαρτες σημαίες `isLoading` και τους πολλαπλούς spinners, και υποστηρίζει την ανάκτηση δεδομένων σε frameworks όπως το Nuxt. Το γεγονός ότι υπάρχει (και ότι είναι ακόμα πειραματικό, καλύτερα συνδυασμένο με ένα error boundary) είναι χρήσιμο για καθαρό ασύγχρονο UI, ειδικά σε SSR/data-heavy εφαρμογές.