Vue <KeepAlive> উপাদান
<KeepAlive> উপাদানটি Vue-এর সবচেয়ে দরকারী অন্তর্নির্মিত উপাদানগুলির মধ্যে একটি। এটি গতিশীল উপাদানগুলির অবস্থা সংরক্ষণ করতে সাহায্য করে, এটি নিশ্চিত করে যে উপাদানগুলি চলমান না থাকলেও তাদের ডেটা হারিয়ে না যায়৷
প্রধান সুবিধা:
<KeepAlive> পূর্বে প্রবেশ করা ব্যবহারকারীর ইনপুট সংরক্ষণ করতে উপাদান তৈরি করে। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং অপ্রয়োজনীয় পুনরায় লোড এড়ায়।
উদাহরণ
আপনার নিজস্ব Vue সার্ভার পান
বিল্ট-ইন <KeepAlive> উপাদান ব্যবহার করে উপাদানগুলি পূর্বে প্রবেশ করা ব্যবহারকারীর ইনপুট ধরে রাখে:
<KeepAlive>
<component :is="activeComp"></component>
</KeepAlive>নীচে আরো উদাহরণ দেখুন.
সংজ্ঞা এবং প্রয়োগ
অন্তর্নির্মিত <KeepAlive> উপাদানটি ডায়নামিক উপাদানগুলির চারপাশে ব্যবহার করা হয় যখন উপাদানগুলি নিষ্ক্রিয় থাকে তাই তাদের অবস্থা সংরক্ষণ করা হয়।
<KeepAlive> দিয়ে উপাদানটি বন্ধ করলে Vue এটিকে ধ্বংস না করে DOM থেকে উপাদানটিকে সরাতে দেয়। এটি উপাদানগুলিকে তাদের পূর্ববর্তী অবস্থা পুনরুদ্ধার করতে সক্ষম করে যখন সেগুলি পুনরায় প্রদর্শিত হয়।
প্রপস
<KeepAlive> উপাদানটি বিভিন্ন প্রপসের সাথে একসাথে ব্যবহার করা যেতে পারে যাতে আমরা নির্দিষ্ট করতে পারি কোন উপাদানগুলিকে ক্যাশে করা উচিত যাতে তারা তাদের অবস্থা বজায় রাখে।
| প্রপ | ব্যাখ্যা |
|---|---|
| none | সমস্ত উপাদান ক্যাশে করা হয় তাই তাদের অবস্থা সংরক্ষিত হয় |
| include | ঐচ্ছিক। উপাদানগুলির নাম উল্লেখ করুন যা তাদের অবস্থান ধরে রাখতে হবে |
| exclude | ঐচ্ছিক। উপাদানগুলির নাম উল্লেখ করুন যেগুলি তাদের অবস্থান ধরে রাখা উচিত নয় |
| max | ঐচ্ছিক। স্টেট ধরে রাখতে উপাদানের সর্বোচ্চ সংখ্যা নির্দিষ্ট করুন। আপনি সর্বোচ্চ 4টি উপাদান ক্যাশে করার জন্য উল্লেখ করলে, পরিদর্শন করা শেষ 4টি উপাদান ক্যাশে করা হবে৷ |
<KeepAlive> এর সাথে ক্যাশ করা উপাদানগুলির জীবনচক্র
একটি অন্তর্নির্মিত <KeepAlive> উপাদান সহ ক্যাশে করা উপাদানগুলি সক্রিয় এবং নিষ্ক্রিয় অবস্থার মধ্যে টগল করবে যদি সেগুলি সক্রিয় গতিশীল উপাদানে সেট করা থাকে বা সেট করা না থাকে৷
সক্রিয় () এবং নিষ্ক্রিয়() লাইফসাইকেল হুকগুলি কোড চালানোর জন্য ব্যবহার করা যেতে পারে যখন এই ধরনের একটি ক্যাশ করা উপাদান সক্রিয় উপাদানে সেট করা হয় বা না থাকে।
লাইফসাইকেল হুকস:
সক্রিয়() হুকটি যখন কম্পোনেন্ট পুনরায় সক্রিয় করা হয় তখন গুলি করা হয়, যখন উপাদানটি নিষ্ক্রিয় করা হয় তখন নিষ্ক্রিয়() হুকটি গুলি করা হয়৷ এটি ডেটা আপডেট বা টাইমারগুলি পরিচালনা করতে সহায়তা করে।
আরো উদাহরণ
উদাহরণ 1
কোন উপাদান মান ক্যাশে করবে তা নির্দিষ্ট করতে অন্তর্ভুক্ত প্রপ ব্যবহার করে:
<KeepAlive include="CompOne,CompThree">
<component :is="activeComp"></component>
</KeepAlive>উদাহরণ 2
কোন উপাদান মান ক্যাশে করবে না তা নির্দিষ্ট করতে exclude prop ব্যবহার করে:
<KeepAlive exclude="CompOne">
<component :is="activeComp"></component>
</KeepAlive>উদাহরণ 3
কতগুলি শেষ পরিদর্শন করা উপাদান মান ক্যাশে করতে হবে তা উল্লেখ করতে সর্বাধিক প্রপ ব্যবহার করে:
<KeepAlive :max="2">
<component :is="activeComp"></component>
</KeepAlive>Vue <KeepAlive> কম্পোনেন্ট টিউটোরিয়াল
Vue-তে <KeepAlive> উপাদান সম্পর্কে আপনার বোঝার পরীক্ষা করার জন্য এই টিউটোরিয়ালটি ব্যবহার করে দেখুন।
Vue-তে <KeepAlive> উপাদানটি কী ব্যবহার করা হয়?
সর্বোত্তম অনুশীলন
<KeepAlive> উপাদান ব্যবহার করার সময় এই নির্দেশিকাগুলি অনুসরণ করুন: