Vue.js

উপস্থিতি

এই পৃষ্ঠায়

Lifecycle Hooks ​

প্রতিটি Vue কম্পোনেন্ট ইন্সট্যান্স তৈরি করার সময় শুরু করার ধাপগুলির একটি সিরিজের মধ্য দিয়ে যায় - উদাহরণস্বরূপ, এটিকে ডেটা পর্যবেক্ষণ সেট আপ করতে হবে, টেমপ্লেট কম্পাইল করতে হবে, ইনস্ট্যান্সটিকে DOM-এ মাউন্ট করতে হবে এবং ডেটা পরিবর্তন হলে DOM আপডেট করতে হবে। পথের পাশাপাশি, এটি লাইফসাইকেল হুক নামে ফাংশনও চালায়, যা ব্যবহারকারীদের নির্দিষ্ট পর্যায়ে তাদের নিজস্ব কোড যোগ করার সুযোগ দেয়।

Registering Lifecycle Hooks ​

উদাহরণস্বরূপ, onMountedmounted হুকটি কম্পোনেন্ট শেষ হওয়ার পরে কোড চালানোর জন্য ব্যবহার করা যেতে পারে প্রাথমিক রেন্ডারিং এবং DOM নোড তৈরি করেছে:

vue
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>
js
export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

এছাড়াও অন্যান্য হুক রয়েছে যা ইনস্ট্যান্সের লাইফসাইকেলের বিভিন্ন পর্যায়ে বলা হবে, যার মধ্যে সবচেয়ে বেশি ব্যবহৃত হচ্ছেonMounted, onUpdated, and onUnmounted.mounted, updated, and unmounted.

সমস্ত লাইফসাইকেল হুকগুলিকে তাদের this প্রেক্ষাপটে বলা হয় যা বর্তমান সক্রিয় দৃষ্টান্তের দিকে ইঙ্গিত করে। মনে রাখবেন এর অর্থ হল লাইফসাইকেল হুক ঘোষণা করার সময় আপনার তীর ফাংশন ব্যবহার করা এড়ানো উচিত, কারণ আপনি যদি তা করেন তাহলে আপনি this এর মাধ্যমে কম্পোনেন্ট ইনস্ট্যান্স অ্যাক্সেস করতে পারবেন না।

onMounted কল করার সময়, Vue স্বয়ংক্রিয়ভাবে নিবন্ধিত কলব্যাক ফাংশনকে বর্তমান সক্রিয় কম্পোনেন্ট উদাহরণের সাথে সংযুক্ত করে। এর জন্য এই হুকগুলিকে কম্পোনেন্ট সেটআপের সময় synchronously নিবন্ধিত হতে হবে। উদাহরণস্বরূপ, এটি করবেন না:

js
setTimeout(() => {
  onMounted(() => {
    // this won't work.
  })
}, 100)

মনে রাখবেন এর মানে এই নয় যে কলটি অবশ্যই লেক্সিকভাবে setup() বা <script setup>-এর ভিতরে রাখতে হবে। যতক্ষণ না কল স্ট্যাক সিঙ্ক্রোনাস থাকে এবং setup() এর মধ্যে থেকে উৎপন্ন হয় ততক্ষণ onMounted() একটি বাহ্যিক ফাংশনে কল করা যেতে পারে।

Lifecycle Diagram ​

নীচে উদাহরণ লাইফসাইকেলের জন্য একটি চিত্র রয়েছে। আপনার এখনই যা চলছে তা সম্পূর্ণরূপে বোঝার দরকার নেই, তবে আপনি যখন আরও শিখবেন এবং আরও তৈরি করবেন, এটি একটি দরকারী রেফারেন্স হবে।

Diagram showing the full lifecycle of a Vue component, from creation to destruction, including all major lifecycle hooks and the internal processes like template compilation and mounting

সমস্ত লাইফসাইকেল হুক (lifecycle hooks) এবং সেগুলোর ব্যবহারের ক্ষেত্র সম্পর্কে বিস্তারিত জানতে Lifecycle Hooks API referenceLifecycle Hooks API reference দেখুন।

আর এভাবেই Vue-এর Essentials বা মৌলিক বিষয়গুলোর সমাপ্তি ঘটল। অভিনন্দন! শেখার মতো আরও অনেক কিছুই বাকি আছে, তবে তার আগে আমরা পরামর্শ দেব একটু বিরতি নিয়ে নিজে Vue নিয়ে কাজ করার—মজার কিছু তৈরি করুন অথবা Examples বিভাগটি ঘুরে দেখুন (যদি আগে না দেখে থাকেন)।

এইমাত্র শেখা বিষয়গুলো নিয়ে আত্মবিশ্বাসী হয়ে উঠলে, গাইডটির পরবর্তী অংশে এগিয়ে যান এবং কম্পোনেন্ট (components) সম্পর্কে আরও বিস্তারিত জানুন।

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