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

जीवनचक्र हुक क्या हैं?

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

Nuxt.js में प्रमुख जीवनचक्र हुक

1. asyncData

• जब इसे कहा जाता है: घटक को सर्वर और क्लाइंट दोनों पर प्रारंभ करने से पहले।
• इसका उपयोग किस लिए किया जाता है: यह आपको एसिंक्रोनस रूप से डेटा लाने और इसे आपके घटक में इंजेक्ट करने की अनुमति देता है। इस हुक के पास इस तक पहुंच नहीं है, लेकिन आप एक ऑब्जेक्ट वापस कर सकते हैं जिसे घटक के डेटा के साथ विलय कर दिया जाएगा।

export default {
  async asyncData({ params }) {
    const data = await fetchData(params.id)
    return { data }
  }
}

2. लाना

• जब इसे कॉल किया जाता है: केवल सर्वर-साइड रेंडरिंग के दौरान और घटक बनने से पहले।
• इसका उपयोग किस लिए किया जाता है: asyncData के विपरीत, इस हुक के पास इस तक पहुंच है, ताकि आप डेटा प्राप्त कर सकें और इसे सीधे घटक गुणों को असाइन कर सकें।

export default {
  async fetch() {
    this.data = await fetchData(this.$route.params.id)
  }
}

3. बनाया था

• जब इसे कॉल किया जाता है: घटक उदाहरण बनने के बाद (क्लाइंट और सर्वर दोनों पर)।
• इसका उपयोग किस लिए किया जाता है: यह घटक स्थिति को आरंभ करने या उन क्रियाओं को ट्रिगर करने के लिए एक अच्छी जगह है जो DOM रेंडरिंग पर निर्भर नहीं होती हैं।

export default {
  created() {
    console.log('Component is created!')
  }
}

4. स्थापित

• जब इसे कहा जाता है: घटक को DOM पर माउंट करने के बाद, लेकिन केवल क्लाइंट साइड पर।
• इसका उपयोग किस लिए किया जाता है: यह DOM-संबंधित संचालन के लिए एकदम सही हुक है, जैसे तृतीय-पक्ष लाइब्रेरी को प्रारंभ करना जो HTML तत्वों की उपस्थिति पर निर्भर करता है।

export default {
  mounted() {
    console.log('Component is mounted to the DOM!')
  }
}

5. beforeDestroy

• जब इसे कहा जाता है: घटक नष्ट होने से ठीक पहले (क्लाइंट और सर्वर दोनों पर)।
• इसका उपयोग किस लिए किया जाता है: आप इस हुक का उपयोग किसी भी सफाई कार्य को करने के लिए कर सकते हैं, जैसे कि ईवेंट श्रोताओं को हटाना।

export default {
  beforeDestroy() {
    console.log('Cleaning up resources...')
  }
}

6. nuxtServerInit

• जब इसे कहा जाता है: यह Vuex स्टोर में एक विशेष क्रिया है, जो सर्वर-साइड रेंडरिंग से पहले ट्रिगर होती है।
• इसका उपयोग किस लिए किया जाता है: यह आपको सर्वर पर एप्लिकेशन के प्रस्तुत होने से पहले उपलब्ध डेटा के साथ स्टोर को भरने की अनुमति देता है।

export const actions = {
  async nuxtServerInit({ commit }) {
    const data = await fetchInitialData()
    commit('setData', data)
  }
}

जीवनचक्र हुक का सारांश

• केवल सर्वर-साइड: asyncData, फ़ेच, nuxtServerInit
• केवल क्लाइंट-साइड: माउंटेड
• क्लाइंट और सर्वर दोनों: बनाया गया, beforeDestroy

निष्कर्ष

Nuxt.js जीवनचक्र हुक रेंडरिंग प्रक्रिया के विभिन्न चरणों में आपके ऐप के व्यवहार को नियंत्रित करने के लिए शक्तिशाली उपकरण हैं। उनका उपयोग कब और कैसे करना है, यह समझने से आपको अपने एप्लिकेशन के प्रदर्शन और उपयोगकर्ता अनुभव को बेहतर बनाने में मदद मिलेगी।