Vue.js जीवनचक्र हुक्स

Vue.js लाइफ़साइकिल हुक विधियों का एक सेट है जो आपको Vue घटक के जीवनचक्र के विशिष्ट चरणों में कोड चलाने की अनुमति देता है। वे निर्माण से लेकर विनाश तक घटक के अस्तित्व के विभिन्न बिंदुओं तक पहुँचने का एक तरीका प्रदान करते हैं। ये हुक डेटा को आरंभ करने, ईवेंट श्रोताओं को सेट करने और संसाधनों को साफ़ करने जैसे कार्यों को करने के लिए आवश्यक हैं।

Vue घटक का जीवनचक्र

Vue घटक के जीवनचक्र को कई चरणों में विभाजित किया जा सकता है। प्रत्येक चरण विशिष्ट जीवनचक्र हुक से जुड़ा होता है जिसका उपयोग आप कोड निष्पादित करने के लिए कर सकते हैं। यहाँ Vue घटक के जीवनचक्र के मुख्य चरण दिए गए हैं:

निर्माण: घटक आरंभ किया जा रहा है.
माउंटिंग: घटक को DOM में जोड़ा जा रहा है।
अद्यतन हो रहा है: घटक का प्रतिक्रियाशील डेटा परिवर्तित हो रहा है।
विनाश: घटक को DOM से हटाया जा रहा है।

प्रमुख जीवनचक्र हुक

Vue.js कई लाइफ़साइकिल हुक प्रदान करता है जिनका उपयोग आप अपने घटकों में कर सकते हैं। प्रत्येक हुक लाइफ़साइकिल में एक विशिष्ट चरण से मेल खाता है। यहाँ सबसे अधिक उपयोग किए जाने वाले हुक दिए गए हैं:

created: घटक इंस्टेंस बनाए जाने के बाद कॉल किया जाता है। यह डेटा लाने या घटक स्थिति को आरंभ करने के लिए एक अच्छी जगह है।
माउंटेड: घटक को DOM पर माउंट किए जाने के बाद कॉल किया जाता है। यह वह जगह है जहाँ आप DOM मैनिपुलेशन कर सकते हैं या एसिंक्रोनस ऑपरेशन शुरू कर सकते हैं।
अपडेटेड: घटक के रिएक्टिव डेटा में परिवर्तन होने और DOM के अपडेट होने के बाद कॉल किया जाता है। डेटा परिवर्तनों पर प्रतिक्रिया करने के लिए उपयोगी।
नष्ट: घटक के नष्ट होने से पहले कॉल किया जाता है। इवेंट श्रोता या टाइमर जैसे संसाधनों को साफ़ करने के लिए इस हुक का उपयोग करें।

जीवनचक्र हुक के उदाहरण

बनाया गया हुक

created हुक का उपयोग घटक इंस्टेंस के निर्माण के बाद लेकिन इसे माउंट किए जाने से पहले क्रियाएँ करने के लिए किया जाता है। डेटा प्राप्त करने के लिए created हुक का उपयोग करने का एक उदाहरण यहाँ दिया गया है:

<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    }
  }
};
</script>

माउंटेड हुक

mounted हुक को घटक को DOM में जोड़े जाने के बाद कॉल किया जाता है। यह DOM मैनिपुलेशन करने या एसिंक्रोनस ऑपरेशन शुरू करने के लिए आदर्श है जिसके लिए घटक को DOM में होना आवश्यक है। यहाँ एक उदाहरण दिया गया है:

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = 'Component has been mounted!';
  }
};
</script>

अपडेटेड हुक

updated हुक को घटक के रिएक्टिव डेटा में बदलाव होने और DOM के अपडेट होने के बाद कॉल किया जाता है। यह डेटा परिवर्तनों पर प्रतिक्रिया करने के लिए उपयोगी है। यहाँ एक उदाहरण दिया गया है:

<template>
  <div>
    <input v-model="text" placeholder="Type something"/>
    <p>Updated Text: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  updated() {
    console.log('Component updated with text:', this.text);
  }
};
</script>

नष्ट हुक

घटक के नष्ट होने से पहले destroyed हुक को कॉल किया जाता है। क्लीनअप करने के लिए इस हुक का उपयोग करें, जैसे कि इवेंट श्रोताओं को हटाना या टाइमर रोकना। यहाँ एक उदाहरण दिया गया है:

<template>
  <div>Check the console when this component is destroyed</div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component is being destroyed');
  }
};
</script>

निष्कर्ष

Vue.js लाइफ़साइकिल हुक किसी घटक के जीवनचक्र के विभिन्न चरणों को प्रबंधित करने के लिए आवश्यक हैं। इन हुक को समझकर और उनका उपयोग करके, आप डेटा को प्रभावी ढंग से आरंभ कर सकते हैं, DOM में हेरफेर कर सकते हैं, अपडेट को संभाल सकते हैं और संसाधनों को साफ़ कर सकते हैं। मज़बूत और उत्तरदायी एप्लिकेशन बनाने के लिए अपने Vue.js घटकों में लाइफ़साइकिल हुक शामिल करें।

जीवनचक्र व्यू निर्मित माउंटेड अपडेट नष्ट हुक घटक डेटा डोम विधियाँ घटनाएँ सफाई आरंभीकरण