Vue.js

উপস্থিতি

এই পৃষ্ঠায়

KeepAlive ​

<KeepAlive> হল একটি অন্তর্নির্মিত কম্পোনেন্ট যা আমাদেরকে শর্তসাপেক্ষে কম্পোনেন্ট ইনস্ট্যান্স ক্যাশে করার অনুমতি দেয় যখন গতিশীলভাবে একাধিক কম্পোনেন্টের মধ্যে স্যুইচ করা হয়।

Basic Usage ​

কম্পোনেন্ট বেসিক অধ্যায়ে, আমরা <component> বিশেষ কম্পোনেন্ট ব্যবহার করে Dynamic Components এর জন্য সিনট্যাক্স প্রবর্তন করেছি:

template
<component :is="activeComponent" />

ডিফল্টরূপে, একটি সক্রিয় কম্পোনেন্ট ইন্সট্যান্স এটি থেকে স্যুইচ করার সময় আনমাউন্ট করা হবে। এর ফলে এটিতে থাকা যেকোনো পরিবর্তিত স্থিতি হারিয়ে যাবে। যখন এই কম্পোনেন্টটি আবার প্রদর্শিত হবে, শুধুমাত্র প্রাথমিক অবস্থার সাথে একটি নতুন উদাহরণ তৈরি করা হবে।

নীচের উদাহরণে, আমাদের দুটি রাষ্ট্রীয় কম্পোনেন্ট রয়েছে - A-তে একটি কাউন্টার রয়েছে, যখন B-তে একটি বার্তা রয়েছে যা v-model এর মাধ্যমে একটি ইনপুটের সাথে সিঙ্ক করা হয়েছে৷ তাদের মধ্যে একটির অবস্থা আপডেট করার চেষ্টা করুন, স্যুইচ করুন, এবং তারপরে এটিতে ফিরে যান :

Current component: A

Count: 0

আপনি লক্ষ্য করবেন যে যখন ফিরে সুইচ করা হবে, পূর্ববর্তী পরিবর্তিত অবস্থা পুনরায় সেট করা হবে।

স্যুইচে নতুন কম্পোনেন্ট ইন্সট্যান্স তৈরি করা সাধারণত উপকারী আচরণ, কিন্তু এই ক্ষেত্রে, আমরা সত্যিই চাই যে দুটি কম্পোনেন্ট ইনস্ট্যান্স নিষ্ক্রিয় থাকা সত্ত্বেও সংরক্ষণ করা হোক। এই সমস্যা সমাধানের জন্য, আমরা আমাদের ডায়নামিক কম্পোনেন্টকে <KeepAlive> -এর অন্তর্নির্মিত কম্পোনেন্ট:

template
<!-- Inactive components will be cached! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

এখন, state কম্পোনেন্ট সুইচ জুড়ে থাকবে:

Current component: A

Count: 0

চেষ্টা করুন

চেষ্টা করুন

TIP

যখন in-DOM টেমপ্লেট ব্যবহার করা হয়, তখন এটিকে <keep-alive> হিসেবে উল্লেখ করা উচিত।

Include / Exclude ​

ডিফল্টরূপে, <KeepAlive> ভিতরে যে কোনো কম্পোনেন্ট ইন্সট্যান্স ক্যাশে করবে। আমরা এই আচরণটিকে include এবং exclude প্রপসের মাধ্যমে কাস্টমাইজ করতে পারি। উভয় প্রপস একটি কমা-ডিলিমিটেড স্ট্রিং, একটি RegExp বা একটি অ্যারে থাকতে পারে উভয় প্রকার:

template
<!-- comma-delimited string -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (use `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Array (use `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

মিলটি কম্পোনেন্টের name বিকল্পের বিপরীতে চেক করা হয়েছে, তাই যে কম্পোনেন্টগুলিকে শর্তসাপেক্ষে KeepAlive দ্বারা ক্যাশ করতে হবে সেগুলিকে অবশ্যই একটি name বিকল্প ঘোষণা করতে হবে।

TIP

সংস্করণ 3.2.34 থেকে, <script setup> ব্যবহার করে একটি একক-ফাইল কম্পোনেন্ট স্বয়ংক্রিয়ভাবে ফাইলের নামের উপর ভিত্তি করে তার নাম বিকল্পটি অনুমান করবে, নামটি ম্যানুয়ালি ঘোষণা করার প্রয়োজনীয়তা দূর করে।

Max Cached Instances ​

আমরা সর্বাধিক সংখ্যক কম্পোনেন্টের দৃষ্টান্ত সীমিত করতে পারি যা max প্রপের মাধ্যমে ক্যাশ করা যেতে পারে। যখন max নির্দিষ্ট করা হয়, <KeepAlive> একটি LRU cache: যদি ক্যাশে করা দৃষ্টান্তের সংখ্যা নির্দিষ্ট সর্বোচ্চ গণনাকে অতিক্রম করতে থাকে, তবে নতুনটির জন্য জায়গা তৈরি করতে সর্বনিম্ন সম্প্রতি অ্যাক্সেস করা ক্যাশে করা উদাহরণ ধ্বংস করা হবে।

template
<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

Lifecycle of Cached Instance ​

যখন একটি কম্পোনেন্ট ইন্সট্যান্স DOM থেকে সরানো হয় কিন্তু <KeepAlive> দ্বারা ক্যাশ করা একটি কম্পোনেন্ট ট্রির অংশ হয়, তখন এটি আনমাউন্ট না করে একটি নিষ্ক্রিয় অবস্থায় চলে যায়। যখন একটি কম্পোনেন্ট ইনস্ট্যান্স অংশ হিসেবে DOM-এ ঢোকানো হয় একটি ক্যাশ করা গাছের, এটি সক্রিয়।

একটি রক্ষিত-জীবিত কম্পোনেন্ট onActivated() এবং [onDeactivated()](/api/composition-api-lifecycle ব্যবহার করে এই দুটি অবস্থার জন্য লাইফসাইকেল হুক নিবন্ধন করতে পারে #অনিষ্ক্রিয়):

vue
<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // called on initial mount
  // and every time it is re-inserted from the cache
})

onDeactivated(() => {
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>

একটি রক্ষিত-জীবিত কম্পোনেন্ট activated এবং deactivated হুক ব্যবহার করে এই দুটি অবস্থার জন্য লাইফসাইকেল হুক নিবন্ধন করতে পারে:

js
export default {
  activated() {
    // called on initial mount
    // and every time it is re-inserted from the cache
  },
  deactivated() {
    // called when removed from the DOM into the cache
    // and also when unmounted
  }
}

Note that:

  • onActivatedactivated is also called on mount, and onDeactivateddeactivated on unmount.

  • উভয় হুক শুধুমাত্র <KeepAlive> দ্বারা ক্যাশে করা রুট কম্পোনেন্টের জন্যই কাজ করে না, তবে ক্যাশে করা গাছের ডিসেন্ডেন্ট কম্পোনেন্টের জন্যও কাজ করে।

Related

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