Vue இல் Suspense கூறு என்ன?

Question

Accepted Answer

`` என்பது **அசின்ક் சார்புகளை** அதன் கூற மரத்தில் ஒருங்கிணைக்கும் கட்டமைக்கப்பட்ட கூற ஆகும் — அனைத்து உள்ளமைக்கப்பட்ட அசின்க் செயல்பாடுகள் தீர்க்கப்படும் வரை அது மாற்று (লোडिং UI) காட்டுகிறது, பின்னர் உண்மையான உள்ளடக்கத்தைக் காட்டுகிறது. இது `isLoading` கையேட்டை அகற்றுகிறது. ## இரண்டு slots ```vue ``` ## இது async setup() / top-level await உடன் செயல்படுகிறது ```vue ``` சாধாரணமாக ஒரு கூற உட்கூறு நிலை நிர்வहणை இல்லாமல் setup இல் `await` செய்ய முடியாது. `` ஒரு குழந்தை **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 ஐ பிழை எல்லை (`onErrorCaptured`) உடன் இணைக்கவும் தோல்வியடைந்த அசின்ક் அமைப்புகளைக் கையாள, ஏனெனில் 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` கொடிகள் மற்றும் பல spinners இல்லாமல் ஒரு மாற்றை காட்டுகிறது. இது சிதறிய `isLoading` கொடிகள் மற்றும் பல spinners ஐ அகற்றுகிறது, மற்றும் Nuxt போன்ற frameworks இல் தரவு获取குப் பதிப்பாக செயல்படுகிறது. இது உள்ளது என்பதை அறிவது (மற்றும் இது இன்னும் பரীक్ష, பிழை எல்லை உடன் சேர்ந்து சிறந்தது) சுத்த அசின்ક் UI க்கு பயுள்ளதாக இருக்கும், குறிப்பாக SSR/data-heavy பயன்பாடுகளில்.