Vue ਵਿਚ Suspense component ਕੀ ਹੈ?

Question

Accepted Answer

`` ਇਕ built-in component ਹੈ ਜੋ ਆਪਣੇ component tree ਵਿਚ **async dependencies** ਨੂੰ ਸੰਚਾਲਿਤ ਕਰਦਾ ਹੈ — ਇਹ ਇਕ fallback (loading UI) ਦਿਖਾਉਂਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਸਾਰੇ nested async operations resolve ਨਹੀਂ ਹੋ ਜਾਂਦੇ, ਫਿਰ ਅਸਲ ਸਮੱਗ੍ਰੀ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਹ manual `isLoading` boilerplate ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। ## ਦੋ slots ```vue ``` ## ਇਹ async setup() / top-level await ਦੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ```vue ``` ਆਮ ਤੌਰ ਤੇ ਇਕ component loading state ਨੂੰ manage ਕੀਤੇ ਬਿਨਾਂ setup ਵਿਚ `await` ਨਹੀਂ ਕਰ ਸਕਦਾ। `` ਇਕ child ਨੂੰ **top-level `await`** (ਜਾਂ async `setup`) ਵਰਤਣ ਦਿੰਦਾ ਹੈ, ਅਤੇ parent Suspense ਇਸ ਲਈ loading state ਨੂੰ handle ਕਰਦਾ ਹੈ — child code ਸਾਫ ਰਹਿੰਦਾ ਹੈ, ਸਿਰਫ ਆਪਣਾ data `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). ``` ## ਗਲਤੀਆਂ ਨੂੰ handle ਕਰਨਾ ```vue ``` Suspense ਨੂੰ error boundary (`onErrorCaptured`) ਦੇ ਨਾਲ ਜੋੜੋ ਤਾਂ ਜੋ ਅਸਫਲ async setups ਨੂੰ handle ਕੀਤਾ ਜਾ ਸਕੇ, ਕਿਉਂਕਿ Suspense ਆਪਣੇ ਆਪ ਵਿਚ ਸਿਰਫ loading/loaded transition ਨੂੰ manage ਕਰਦਾ ਹੈ। ## ਸਥਿਤੀ ਨੋਟ ```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 ਨੂੰ ਸੰਚਾਲਿਤ ਕਰਦਾ ਹੈ — components ਆਪਣੇ data ਨੂੰ ਸਿੱਧੇ `await` ਕਰ ਸਕਦੇ ਹਨ ਜਦੋਂ ਕਿ ਇਕ ਸਿੰਗਲ ancestor ਇਕ fallback ਦਿਖਾਉਂਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਸਭ ਕੁਝ ਤਿਆਰ ਨਹੀਂ ਹੋ ਜਾਂਦਾ। ਇਹ scattered `isLoading` flags ਅਤੇ ਬਹੁ-ਆਖਰੀ spinners ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ, ਅਤੇ Nuxt ਵਰਗੇ frameworks ਵਿਚ data fetching ਨੂੰ ਅੰਡਰਪਿਨ ਕਰਦਾ ਹੈ। ਜਾਣਨਾ ਕਿ ਇਹ ਮੌਜੂਦ ਹੈ (ਅਤੇ ਇਹ ਅਜੇ ਵੀ ਪ੍ਰਾਯੋਗਿਕ ਹੈ, error boundary ਦੇ ਨਾਲ ਸਭ ਤੋਂ ਵਧੀਆ) clean async UI ਲਈ ਉਪਯੋਗੀ ਹੈ, ਖਾਸ ਤੌਰ ਤੇ SSR/data-heavy apps ਵਿਚ।