Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Suspense ​

পরীক্ষামূলক বৈশিষ্ট্য

<Suspense> একটি পরীক্ষামূলক বৈশিষ্ট্য৷ এটি স্থিতিশীল অবস্থায় পৌঁছানোর নিশ্চয়তা দেয় না এবং এটি হওয়ার আগেই API পরিবর্তিত হতে পারে৷

<Suspense> হল একটি কম্পোনেন্ট ট্রিতে অ্যাসিঙ্ক নির্ভরতা অর্কেস্ট্রেট করার জন্য একটি অন্তর্নির্মিত কম্পোনেন্ট। এটি কম্পোনেন্ট ট্রির নিচে একাধিক নেস্টেড অ্যাসিঙ্ক নির্ভরতা সমাধানের জন্য অপেক্ষা করার সময় একটি লোডিং স্টেট রেন্ডার করতে পারে।

Async Dependencies ​

<Suspense> যে সমস্যাটি সমাধান করার চেষ্টা করছে এবং এটি কীভাবে এই অ্যাসিঙ্ক নির্ভরতার সাথে ইন্টারঅ্যাক্ট করে তা ব্যাখ্যা করতে, আসুন নিম্নলিখিতগুলির মতো একটি কম্পোনেন্ট শ্রেণিবিন্যাস কল্পনা করি:

<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus> (component with async setup())
   └─ <Content>
      ├─ <ActivityFeed> (async component)
      └─ <Stats> (async component)

কম্পোনেন্ট ট্রিতে একাধিক নেস্টেড কম্পোনেন্ট রয়েছে যার রেন্ডারিং কিছু অ্যাসিঙ্ক রিসোর্সের উপর নির্ভর করে প্রথমে সমাধান করা হবে। <Suspense> ছাড়া, তাদের প্রত্যেকের নিজস্ব লোডিং/ত্রুটি এবং লোড হওয়া অবস্থা পরিচালনা করতে হবে। সবচেয়ে খারাপ পরিস্থিতিতে, আমরা পৃষ্ঠায় তিনটি লোডিং স্পিনার দেখতে পারি, বিভিন্ন সময়ে প্রদর্শিত বিষয়অবজেক্ট সহ।

<Suspense> কম্পোনেন্টটি আমাদের শীর্ষ-স্তরের লোডিং / ত্রুটির অবস্থা প্রদর্শন করার ক্ষমতা দেয় যখন আমরা এই নেস্টেড অ্যাসিঙ্ক নির্ভরতাগুলি সমাধান করার জন্য অপেক্ষা করি।

দুটি ধরণের অ্যাসিঙ্ক নির্ভরতা রয়েছে যেগুলির জন্য <Suspense> অপেক্ষা করতে পারে:

  1. একটি async setup() হুক সহ কম্পোনেন্ট। এতে শীর্ষ-স্তরের await অভিব্যক্তি সহ <script setup> ব্যবহার করা কম্পোনেন্ট অন্তর্ভুক্ত রয়েছে।

  2. Async Components.

async setup() ​

একটি রচনা API কম্পোনেন্টের setup() হুক অ্যাসিঙ্ক হতে পারে:

js
export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}

<script setup> ব্যবহার করলে, উচ্চ-স্তরের await অভিব্যক্তির উপস্থিতি স্বয়ংক্রিয়ভাবে কম্পোনেন্টটিকে একটি অ্যাসিঙ্ক নির্ভরতা করে তোলে:

vue
<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>

Async Components ​

Async কম্পোনেন্টগুলি ডিফল্টরূপে "suspensible"। এর মানে হল যে যদি এটির প্যারেন্ট চেইনে একটি <Suspense> থাকে, তাহলে এটি সেই <Suspense>-এর একটি অ্যাসিঙ্ক নির্ভরতা হিসাবে বিবেচিত হবে। এই ক্ষেত্রে, লোডিং অবস্থা <Suspense> দ্বারা নিয়ন্ত্রিত হবে এবং কম্পোনেন্টের নিজস্ব লোডিং, ত্রুটি, বিলম্ব এবং টাইমআউট বিকল্পগুলি উপেক্ষা করা হবে।

অ্যাসিঙ্ক কম্পোনেন্ট Suspense নিয়ন্ত্রণ থেকে অপ্ট-আউট করতে পারে এবং কম্পোনেন্টটিকে তার বিকল্পগুলিতে suspensible: false উল্লেখ করে সর্বদা তার নিজস্ব লোডিং অবস্থা নিয়ন্ত্রণ করতে দেয়।

Loading State ​

<Suspense> কম্পোনেন্টটির দুটি স্লট রয়েছে: #default এবং #fallback। উভয় স্লটই শুধুমাত্র এক অবিলম্বে চাইল্ড নোডের জন্য অনুমতি দেয়। সম্ভব হলে ডিফল্ট স্লটে নোড দেখানো হয়। যদি না হয়, তাহলে এর পরিবর্তে ফলব্যাক স্লটে নোড দেখানো হবে।

template
<Suspense>
  <!-- component with nested async dependencies -->
  <Dashboard />

  <!-- loading state via #fallback slot -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

প্রাথমিক রেন্ডারে, <Suspense> মেমরিতে তার ডিফল্ট স্লট সামগ্রী রেন্ডার করবে। প্রক্রিয়া চলাকালীন কোনো অ্যাসিঙ্ক নির্ভরতা সম্মুখীন হলে, এটি একটি মুলতুবি অবস্থায় প্রবেশ করবে। মুলতুবি থাকা অবস্থায়, ফলব্যাক সামগ্রী প্রদর্শিত হবে। যখন সমস্ত সম্মুখীন অ্যাসিঙ্ক নির্ভরতা সমাধান করা হয়, <Suspense> একটি মীমাংসিত অবস্থায় প্রবেশ করে এবং সমাধানকৃত ডিফল্ট স্লট সামগ্রী প্রদর্শিত হয়।

যদি প্রাথমিক রেন্ডারের সময় কোনো অ্যাসিঙ্ক নির্ভরতার সম্মুখীন না হয়, <Suspense> সরাসরি একটি সমাধান করা অবস্থায় চলে যাবে।

একবার সমাধান করা অবস্থায়, #default স্লটের রুট নোড প্রতিস্থাপিত হলেই <Suspense> একটি মুলতুবি অবস্থায় ফিরে আসবে। Suspense>` একটি মুলতুবি অবস্থায় ফিরে যেতে।

যখন একটি প্রত্যাবর্তন ঘটবে, ফলব্যাক সামগ্রী অবিলম্বে প্রদর্শিত হবে না৷ পরিবর্তে, <Suspense> পূর্ববর্তী #default সামগ্রী প্রদর্শন করবে যখন নতুন সামগ্রী এবং এর অ্যাসিঙ্ক নির্ভরতা সমাধানের জন্য অপেক্ষা করা হবে। এই আচরণটি এর সাথে কনফিগার করা যেতে পারে timeout প্রপ: <Suspense> যদি নতুন ডিফল্ট সামগ্রী রেন্ডার করতে timeout এর চেয়ে বেশি সময় নেয় তাহলে ফলব্যাক সামগ্রীতে স্যুইচ করবে। 0 এর একটি timeout মান ডিফল্ট হলে ফলব্যাক সামগ্রী অবিলম্বে প্রদর্শিত হবে বিষয়অবজেক্ট প্রতিস্থাপিত হয়।

Events ​

<Suspense> কম্পোনেন্টটি ৩টি ইভেন্ট নির্গত করে: pending, resolve এবং fallback। একটি pending অবস্থায় প্রবেশ করার সময় pending ইভেন্টটি ঘটে। যখন নতুন বিষয়অবজেক্টর সমাধান করা শেষ হয় তখন resolve ইভেন্টটি নির্গত হয় ডিফল্ট স্লট। fallback স্লটের বিষয়অবজেক্ট দেখানো হলে fallback ইভেন্টটি চালু হয়।

ইভেন্টগুলি ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, নতুন কম্পোনেন্টগুলি লোড হওয়ার সময় পুরানো DOM-এর সামনে একটি লোডিং সূচক দেখানোর জন্য৷

Error Handling ​

<Suspense> বর্তমানে কম্পোনেন্টটির মাধ্যমে ত্রুটি পরিচালনা করে না - তবে, আপনি ক্যাপচার এবং অ্যাসিঙ্ক পরিচালনা করতে errorCaptured বিকল্প বা onErrorCaptured() হুক ব্যবহার করতে পারেন <Suspense> এর মূল কম্পোনেন্টে ত্রুটি।

Combining with Other Components ​

<Transition> এবং <KeepAlive> কম্পোনেন্টগুলির সংমিশ্রণে <Suspense> ব্যবহার করা সাধারণ। এগুলোর নেস্টিং অর্ডার কম্পোনেন্টগুলি সঠিকভাবে কাজ করার জন্য গুরুত্বপূর্ণ।

উপরন্তু, এই কম্পোনেন্টগুলি প্রায়ই Vue Router থেকে <RouterView> কম্পোনেন্টের সাথে ব্যবহার করা হয়।

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে এই কম্পোনেন্টগুলিকে নেস্ট করতে হয় যাতে তারা সমস্ত প্রত্যাশিতভাবে আচরণ করে৷ সহজ সংমিশ্রণের জন্য আপনি আপনার প্রয়োজন নেই এমন কম্পোনেন্টগুলি সরাতে পারেন:

template
<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- main content -->
          <component :is="Component"></component>

          <!-- loading state -->
          <template #fallback>
            Loading...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>

Vue রাউটারে ডাইনামিক ইম্পোর্ট ব্যবহার করে lazily loading components জন্য বিল্ড-ইন সমর্থন রয়েছে। এগুলি অ্যাসিঙ্ক কম্পোনেন্টগুলির থেকে আলাদা এবং বর্তমানে তারা <Suspense> ট্রিগার করবে না। যাইহোক, তাদের এখনও ডিসেন্ডেন্টস হিসাবে অ্যাসিঙ্ক কম্পোনেন্ট থাকতে পারে এবং সেগুলি স্বাভাবিক উপায়ে <Suspense> ট্রিগার করতে পারে।

Nested Suspense ​

  • শুধুমাত্র ৩.৩+ এ সমর্থিত

When we have multiple async components (common for nested or layout-based routes) like this:

template
<Suspense>
  <component :is="DynamicAsyncOuter">
    <component :is="DynamicAsyncInner" />
  </component>
</Suspense>

<Suspense> একটি সীমানা তৈরি করে যা প্রত্যাশিত হিসাবে ট্রি নিচে সমস্ত অ্যাসিঙ্ক্রোনাস কম্পোনেন্টগুলিকে সমাধান করবে। যাইহোক, যখন আমরা DynamicAsyncOuter পরিবর্তন করি, <Suspense> এটি সঠিকভাবে অপেক্ষা করে, তবে যখন আমরা DynamicAsyncInner পরিবর্তন করি, তখন নেস্টেড DynamicAsyncInner এটি সমাধান না হওয়া পর্যন্ত একটি খালি নোড রেন্ডার করে (পূর্ববর্তী বা ফলব্যাক স্লটের পরিবর্তে)।

এটি সমাধান করার জন্য, নেস্টেড কম্পোনেন্টটির জন্য প্যাচ পরিচালনা করার জন্য আমাদের একটি নেস্টেড Suspense থাকতে পারে, যেমন:

template
<Suspense>
  <component :is="DynamicAsyncOuter">
    <Suspense suspensible> <!-- this -->
      <component :is="DynamicAsyncInner" />
    </Suspense>
  </component>
</Suspense>

আপনি যদি suspensible প্রপটি সেট না করেন, তাহলে অভ্যন্তরীণ <Suspense> কে প্যারেন্ট <Suspense> দ্বারা একটি সিঙ্ক কম্পোনেন্ট হিসাবে বিবেচনা করা হবে। এর মানে হল এটির নিজস্ব ফলব্যাক স্লট রয়েছে এবং যদি উভয় Dynamic কম্পোনেন্ট একই সাথে পরিবর্তিত হয়, তাহলে খালি নোড এবং একাধিক প্যাচিং চক্র থাকতে পারে যখন চাইল্ড <Suspense> তার নিজস্ব নির্ভরতা ট্রি লোড করছে, যা কাঙ্ক্ষিত নাও হতে পারে। যখন এটি সেট করা হয়, তখন সমস্ত অ্যাসিঙ্ক নির্ভরতা পরিচালনা প্যারেন্ট <Suspense>-এ দেওয়া হয় (নির্গত ইভেন্ট সহ) এবং অভ্যন্তরীণ <Suspense> কেবল নির্ভরতা রেজোলিউশন এবং প্যাচিংয়ের জন্য অন্য একটি সীমানা হিসাবে কাজ করে।

Related

GitHub-এ এই পৃষ্ঠাটি সম্পাদনা করুন