Vue জীবনচক্র হুক
Vue-তে লাইফসাইকেল হুকগুলি একটি উপাদানের জীবনচক্রের নির্দিষ্ট পর্যায় যেখানে কিছু করার জন্য কোড যোগ করা যেতে পারে।
জীবন চক্র হুক ওভারভিউ
প্রতিবার একটি উপাদান তার জীবনচক্রের একটি নতুন পর্যায়ে পৌঁছায়, একটি নির্দিষ্ট ফাংশন কার্যকর করা হয় এবং সেই ফাংশনে কোড যোগ করা যেতে পারে। এই ধরনের ফাংশনকে লাইফসাইকেল হুক বলা হয় কারণ আমরা সেই পর্যায়ে আমাদের কোডকে "হুক" করতে পারি।
সমস্ত জীবনচক্র হুক যা একটি উপাদান আছে:
এবং কিছু অতিরিক্ত হুক: errorCaptured, renderTracked, renderTriggered, সক্রিয়, নিষ্ক্রিয়, serverPrefetch
জীবনচক্র হুকগুলিতে অ্যাক্সেস
বিভিন্ন জীবনচক্র হুকগুলিতে আপনি যা অ্যাক্সেস করতে পারেন তা এখানে:
| হুক | ডেটা বৈশিষ্ট্য | পদ্ধতি | DOM উপাদান |
|---|---|---|---|
| beforeCreate | ✗ উপলব্ধ নয় | ✗ উপলব্ধ নয় | ✗ উপলব্ধ নয় |
| created | ✓ উপলব্ধ | ✓ উপলব্ধ | ✗ উপলব্ধ নয় |
| beforeMount | ✓ উপলব্ধ | ✓ উপলব্ধ | ✗ উপলব্ধ নয় |
| mounted | ✓ উপলব্ধ | ✓ উপলব্ধ | ✓ উপলব্ধ |
'আগে তৈরি করুন' হুক
বিফোর ক্রিয়েট লাইফসাইকেল হুকটি কম্পোনেন্ট শুরু হওয়ার আগে ঘটে, তাই এটি Vue কম্পোনেন্টের ডেটা, গণনাকৃত বৈশিষ্ট্য, পদ্ধতি এবং ইভেন্ট শ্রোতাদের সেট করার আগে।
উদাহরণস্বরূপ, আপনি একটি গ্লোবাল ইভেন্ট লিসেনার সেট আপ করতে beforeCreate হুক ব্যবহার করতে পারেন, কিন্তু beforeCreate লাইফসাইকেল হুক থেকে উপাদানগুলির সাথে সম্পর্কিত উপাদানগুলি অ্যাক্সেস করার চেষ্টা করবেন না কারণ সেগুলি এখনও তৈরি করা হয়নি।
এছাড়াও, beforeCreate লাইফসাইকেল হুক থেকে DOM উপাদানগুলি অ্যাক্সেস করার চেষ্টা করার কোন মানে হয় না কারণ উপাদানটি লোড না হওয়া পর্যন্ত সেগুলি তৈরি করা হবে না।
<টেমপ্লেট> <h2>উপাদান</h2> <p>এটি হল উপাদান</p> <p id="pResult">{{ পাঠ্য }}</p>৷ </ টেমপ্লেট> <script> রপ্তানি ডিফল্ট { ডেটা() { ফিরে পাঠ্য: '...' } }, beforeCreate() { this.text = 'প্রাথমিক পাঠ্য'; // এই লাইনের কোন প্রভাব নেই console.log("beforeCreate: উপাদানটি এখনো তৈরি করা হয়নি।"); } } </script><template>
<h1>The 'beforeCreate' Lifecycle Hook</h1>
<p>We can see the console.log() message...</p>
<button @click="this.activeComp = !this.activeComp">
Add/Remove Component
</button>
<div>
<comp-one v-if="activeComp"></comp-one>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: false
}
}
}
</script>দ্রষ্টব্য:উপরের উদাহরণে, CompOne.vue-এ লাইন 15 এর কোন প্রভাব নেই কারণ আমরা সেই লাইনের Vue ডেটা প্রপার্টির ভিতরে টেক্সট পরিবর্তন করার চেষ্টা করছি, কিন্তু Vue ডেটা প্রপার্টি আসলে এখনও তৈরি করা হয়নি। এছাড়াও, console.log() কলের ফলাফল দেখতে ব্রাউজার কনসোল খুলতে ভুলবেন না।
'তৈরি' হুক
তৈরি লাইফসাইকেল হুকটি কম্পোনেন্ট শুরু হওয়ার পরে ঘটে, তাই Vue ইতিমধ্যেই উপাদানটির ডেটা, গণনা করা বৈশিষ্ট্য, পদ্ধতি এবং ইভেন্ট শ্রোতাদের সেট আপ করেছে।
তৈরি লাইফসাইকেল হুক থেকে DOM উপাদানগুলি অ্যাক্সেস করার চেষ্টা করবেন না, কারণ উপাদানটি লোড না হওয়া পর্যন্ত DOM উপাদানগুলি অ্যাক্সেসযোগ্য নয়৷
তৈরি লাইফসাইকেল হুক ডেটা পুনরুদ্ধার করতে বা HTTP অনুরোধের সাথে প্রাথমিক ডেটা মান সেট করতে ব্যবহার করা যেতে পারে।
'আগে মাউন্ট' হুক
বিফোরমাউন্ট লাইফসাইকেল হুক কম্পোনেন্ট লোড হওয়ার ঠিক আগে ঘটে এবং তাই DOM-এ কম্পোনেন্ট যোগ করার ঠিক আগে।
আগে মাউন্ট লাইফসাইকেল হুক থেকে DOM উপাদানগুলি অ্যাক্সেস করার চেষ্টা করবেন না, কারণ উপাদানটি লোড না হওয়া পর্যন্ত DOM উপাদানগুলি অ্যাক্সেসযোগ্য নয়৷
'মাউন্ট করা' হুক
DOM ট্রিতে একটি কম্পোনেন্ট যোগ করার সাথে সাথে মাউন্টেড() ফাংশন বলা হয় এবং আমরা সেই সময়ে আমাদের কোড যোগ করতে পারি।
কম্পোনেন্টের মালিকানাধীন DOM উপাদানগুলির সাথে সম্পর্কিত জিনিসগুলি করার এটি প্রথম সুযোগ।
<template>
<h2>Form Component</h2>
<p>When this component is added to the DOM tree...</p>
<form @submit.prevent>
<label>
<p>
Name: <br>
<input type="text" ref="inpName">
</p>
</label>
<button>Submit</button>
</form>
</template>
<script>
export default {
mounted() {
this.$refs.inpName.focus();
}
}
</script>আপনার নিজস্ব Vue সার্ভার পান
দ্রষ্টব্য:DOM-এ কম্পোনেন্ট যোগ করার পরে মাউন্ট করা ফেজটি ঘটে, কিন্তু উপরের উদাহরণে alert() কম্পোনেন্ট দৃশ্যমান হওয়ার আগে দৃশ্যমান হয়। এর কারণ হল যে কম্পোনেন্টটি প্রথমে DOM-এ যোগ করা হয়, কিন্তু ব্রাউজার স্ক্রীনে কম্পোনেন্ট রেন্ডার করার আগে মাউন্ট করা ফেজ হয় এবং alert() দৃশ্যমান হয় এবং ব্রাউজার কম্পোনেন্ট রেন্ডারিং বিরতি দেয়।
'আগে আপডেট' হুক
বিফোরআপডেট লাইফসাইকেল হুক বলা হয় যখনই আমাদের কম্পোনেন্টের ডেটাতে পরিবর্তন হয়, কিন্তু আপডেটটি স্ক্রিনে রেন্ডার হওয়ার আগে। বিফোরআপডেট লাইফসাইকেল লুপ আপডেট করা লাইফসাইকেল লুপের ঠিক আগে ঘটে।
BeforeUpdate হুক সম্পর্কে বিশেষ জিনিস হল যে আমরা একটি নতুন আপডেট ট্রিগার না করেই অ্যাপ্লিকেশনটিতে পরিবর্তন করতে পারি, তাই আমরা অন্যথায় অন্তহীন লুপ এড়াতে পারি।
'আপডেট করা' হুক
আমাদের কম্পোনেন্ট তার DOM ট্রি আপডেট করার পর আপডেট করা লাইফসাইকেল হুক বলা হয়।
সতর্কতা:
আপডেট করা লাইফসাইকেল হুক কল করা হলে পৃষ্ঠাটি পরিবর্তন করার জন্য যত্ন নেওয়া আবশ্যক, কারণ পৃষ্ঠাটি বারবার আপডেট করা হবে, একটি অন্তহীন লুপ তৈরি করা হবে।
<টেমপ্লেট> <h1>'আপডেট করা' লাইফসাইকেল হুক</h1> <বোতাম @click="this.activeComp = !this.activeComp"> উপাদান যোগ করুন/সরান </ বোতাম> <div> <comp-one v-if="activeComp"></comp-one> </div> <div>{{ পাঠ্য }}</div> </ টেমপ্লেট> <script> রপ্তানি ডিফল্ট { ডেটা() { ফিরে ActiveComp: সত্য, পাঠ্য: "হ্যালো," } }, আপডেট() { this.text += "হাই,"; // ⚠️ একটি অসীম লুপ তৈরি করে! } } </script>'foreUnmount' হুক
ডিওএম থেকে একটি উপাদান সরানোর ঠিক আগে আগে আনমাউন্ট লাইফসাইকেল হুক বলা হয়।
নিচের উদাহরণে আমরা দেখতে পাচ্ছি যে DOM-এর কম্পোনেন্ট এলিমেন্ট এখনও আগে আনমাউন্ট হুকে অ্যাক্সেস করা যেতে পারে।
'আনমাউন্ট করা' হুক
DOM থেকে একটি উপাদান সরানোর পরে আনমাউন্ট করা লাইফসাইকেল হুক বলা হয়।
এই হুক ইভেন্ট শ্রোতাদের অপসারণ বা টাইমার বা বিরতি বাতিল করার জন্য উদাহরণস্বরূপ ব্যবহার করা যেতে পারে।
দ্রষ্টব্য:DOM থেকে কম্পোনেন্ট সরানোর পরে আনমাউন্ট করা ফেজটি ঘটে, কিন্তু উপরের উদাহরণে alert() কম্পোনেন্টটি অদৃশ্য হয়ে যাওয়ার আগে দৃশ্যমান হয়। এর কারণ হল যে কম্পোনেন্টটি প্রথমে DOM থেকে সরানো হয়, কিন্তু ব্রাউজার স্ক্রীনে কম্পোনেন্ট অপসারণের রেন্ডার করার আগে, আনমাউন্ট করা ফেজটি ঘটে এবং alert() দৃশ্যমান হয় এবং ব্রাউজারটি কম্পোনেন্ট প্রদর্শন করতে বিরতি দেয়।
অন্যান্য জীবনচক্র হুক
সমালোচনামূলক হুক
জীবনচক্র প্রবাহ চিত্র
ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
প্রশিক্ষণ:
DOM থেকে একটি উপাদান সরানোর ঠিক আগে ______ লাইফসাইকেল হুক বলা হয়।