Vue میں Suspense کمپوننٹ کیا ہے؟

Question

Accepted Answer

`` ایک built-in کمپوننٹ ہے جو اپنے کمپوننٹ ٹری میں **async dependencies** کو منظم کرتا ہے — یہ ایک fallback (loading UI) دکھاتا ہے جب تک تمام nested async آپریشنز مکمل نہ ہو جائیں، پھر اصل content دکھاتا ہے۔ یہ manual `isLoading` boilerplate کو ختم کرتا ہے۔ ## دونوں slots ```vue ``` ## یہ async setup() / top-level await کے ساتھ کام کرتا ہے ```vue ``` عام طور پر ایک کمپوننٹ setup میں بغیر loading state کو منظم کیے `await` نہیں کر سکتا۔ `` ایک child کو **top-level `await`** (یا async `setup`) استعمال کرنے دیتا ہے، اور parent Suspense اس کے لیے loading state کو سنبھالتا ہے — child کا کوڈ صاف رہتا ہے، صرف اپنے ڈیٹا کو `await` کرتا ہے۔ ## یہ تمام nested async dependencies کا انتظار کرتا ہے ```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). ``` ## Errors کو handle کرنا ```vue ``` Suspense کو error boundary (`onErrorCaptured`) کے ساتھ جوڑیں تاکہ ناکام async setups کو handle کریں، کیونکہ Suspense خود صرف loading/loaded transition کو منظم کرتا ہے۔ ## Status note ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## یہ اہم کیوں ہے `` declaratively async loading states کو منظم کرتا ہے — کمپوننٹس کو سیدھے اپنے ڈیٹا کو `await` کرنے دیتے ہوئے ایک single ancestor تمام چیزیں تیار ہونے تک ایک fallback دکھاتا ہے۔ یہ scattered `isLoading` flags اور multiple spinners کو ختم کرتا ہے، اور Nuxt جیسے frameworks میں ڈیٹا fetching کی بنیاد ہے۔ یہ جاننا کہ یہ موجود ہے (اور یہ ابھی experimental ہے، error boundary کے ساتھ بہتر استعمال ہوتا ہے) clean async UI کے لیے مفید ہے، خاص طور پر SSR/data-heavy apps میں۔