M

MLOG

हिन्दी

Vue.js 3 कंपोजीशन API को गहराई से जानें। दुनिया भर के डेवलपर्स के लिए व्यावहारिक उदाहरणों और सर्वोत्तम प्रथाओं के साथ पुन: प्रयोज्य, रखरखाव योग्य और परीक्षण योग्य Vue.js एप्लिकेशन बनाना सीखें।

Vue.js 3 कंपोजीशन API: वैश्विक डेवलपर्स के लिए एक गहन विश्लेषण

Vue.js अपने सरल लर्निंग कर्व और शक्तिशाली फीचर्स के कारण आधुनिक वेब एप्लिकेशन बनाने के लिए तेजी से एक लोकप्रिय विकल्प बन गया है। Vue.js 3 इसे कंपोजीशन API की शुरुआत के साथ और आगे ले जाता है, जो आपके कंपोनेंट लॉजिक को व्यवस्थित करने का एक नया तरीका है। यह गहन विश्लेषण कंपोजीशन API को प्रभावी ढंग से समझने और उपयोग करने के लिए एक व्यापक गाइड प्रदान करता है, जो आपको अधिक रखरखाव योग्य, पुन: प्रयोज्य और परीक्षण योग्य Vue एप्लिकेशन बनाने के कौशल से लैस करता है।

कंपोजीशन API क्या है?

कंपोजीशन API, APIs का एक सेट है जो हमें विकल्पों को घोषित करने के बजाय इम्पोर्टेड फ़ंक्शंस का उपयोग करके Vue कंपोनेंट्स लिखने की अनुमति देता है। अनिवार्य रूप से, यह आपको संबंधित लॉजिक को एक साथ समूहित करने की अनुमति देता है, भले ही वह टेम्पलेट में कहीं भी दिखाई दे। यह ऑप्शन्स API (data, methods, computed, watch) के विपरीत है, जो आपको इन पूर्वनिर्धारित श्रेणियों के आधार पर कोड को व्यवस्थित करने के लिए मजबूर करता है। ऑप्शन्स API को अपने कोड को इस आधार पर व्यवस्थित करने के रूप में सोचें कि यह *क्या* है (डेटा, मेथड, आदि), जबकि कंपोजीशन API आपको कोड को इस आधार पर व्यवस्थित करने देता है कि *यह क्या करता है*।

कंपोजीशन API का मूल setup() फ़ंक्शन के इर्द-गिर्द घूमता है। यह फ़ंक्शन एक कंपोनेंट के भीतर कंपोजीशन API का उपयोग करने का प्रवेश बिंदु है। setup() के अंदर, आप कंपोजेबल फ़ंक्शंस का उपयोग करके रिएक्टिव स्टेट, कंप्यूटेड प्रॉपर्टीज, मेथड्स और लाइफ़साइकल हुक्स को परिभाषित कर सकते हैं।

कंपोजीशन API का उपयोग क्यों करें?

कंपोजीशन API पारंपरिक ऑप्शन्स API की तुलना में कई फायदे प्रदान करता है, खासकर बड़े और अधिक जटिल अनुप्रयोगों के लिए:

मूल अवधारणाओं को समझना

आइए उन प्रमुख अवधारणाओं में गोता लगाएँ जो कंपोजीशन API का आधार हैं:

१. setup()

जैसा कि पहले उल्लेख किया गया है, setup() कंपोजीशन API का उपयोग करने का प्रवेश बिंदु है। यह एक कंपोनेंट विकल्प है जो कंपोनेंट बनने से पहले निष्पादित होता है। setup() के अंदर, आप रिएक्टिव स्टेट, कंप्यूटेड प्रॉपर्टीज, मेथड्स और लाइफ़साइकल हुक्स को परिभाषित करते हैं, और फिर एक ऑब्जेक्ट लौटाते हैं जिसमें वे मान होते हैं जिन्हें आप टेम्पलेट में उजागर करना चाहते हैं।

उदाहरण:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

इस उदाहरण में, हम count नामक एक रिएक्टिव वैरिएबल बनाने के लिए ref का उपयोग कर रहे हैं। हम increment नामक एक मेथड भी परिभाषित करते हैं जो count के मान को बढ़ाता है। अंत में, हम count और increment युक्त एक ऑब्जेक्ट लौटाते हैं, जो उन्हें कंपोनेंट के टेम्पलेट में उपलब्ध कराता है।

२. ref और reactive के साथ रिएक्टिव स्टेट

कंपोजीशन API रिएक्टिव स्टेट बनाने के लिए दो मुख्य फ़ंक्शन प्रदान करता है: ref और reactive।

ref का उपयोग करके उदाहरण:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

reactive का उपयोग करके उदाहरण:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

३. computed के साथ कंप्यूटेड प्रॉपर्टीज

कंप्यूटेड प्रॉपर्टीज वे मान हैं जो अन्य रिएक्टिव स्टेट से प्राप्त होते हैं। जब भी उनकी निर्भरताएँ बदलती हैं तो वे स्वचालित रूप से अपडेट हो जाते हैं। computed फ़ंक्शन एक गेटर फ़ंक्शन को तर्क के रूप में लेता है और एक रीड-ओनली रिएक्टिव रेफ लौटाता है।

उदाहरण:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

इस उदाहरण में, fullName एक कंप्यूटेड प्रॉपर्टी है जो firstName और lastName पर निर्भर करती है। जब भी firstName या lastName में से कोई भी बदलता है, तो fullName स्वचालित रूप से अपडेट हो जाएगा।

४. watch और watchEffect के साथ वॉचर्स

वॉचर्स आपको रिएक्टिव स्टेट में परिवर्तनों पर प्रतिक्रिया करने की अनुमति देते हैं। कंपोजीशन API वॉचर्स बनाने के दो मुख्य तरीके प्रदान करता है: watch और watchEffect।

watch का उपयोग करके उदाहरण:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

watchEffect का उपयोग करके उदाहरण:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    watchEffect(() => {
      console.log(`Message is: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

५. लाइफ़साइकल हुक्स

कंपोजीशन API on से शुरू होने वाले फ़ंक्शंस के माध्यम से कंपोनेंट लाइफ़साइकल हुक्स तक पहुंच प्रदान करता है, जैसे कि onMounted, onUpdated, और onUnmounted। ये फ़ंक्शंस एक कॉलबैक को तर्क के रूप में लेते हैं, जो तब निष्पादित होगा जब संबंधित लाइफ़साइकल हुक ट्रिगर होगा।

उदाहरण:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onUnmounted(() => {
      console.log('Component is unmounted')
    })

    return {}
  }
}

कंपोजेबल फ़ंक्शंस बनाना

कंपोजीशन API की असली शक्ति पुन: प्रयोज्य कंपोजेबल फ़ंक्शंस बनाने की क्षमता से आती है। एक कंपोजेबल फ़ंक्शन बस एक फ़ंक्शन है जो कंपोनेंट लॉजिक के एक टुकड़े को समाहित करता है और रिएक्टिव स्टेट और फ़ंक्शंस लौटाता है जिनका उपयोग कई कंपोनेंट्स में किया जा सकता है।

उदाहरण: आइए एक कंपोजेबल फ़ंक्शन बनाएं जो माउस की स्थिति को ट्रैक करता है:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

अब, आप इस कंपोजेबल फ़ंक्शन का उपयोग किसी भी कंपोनेंट में कर सकते हैं:

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

व्यावहारिक उदाहरण और उपयोग के मामले

आइए कुछ व्यावहारिक उदाहरणों का पता लगाएं कि वास्तविक दुनिया के परिदृश्यों में कंपोजीशन API का उपयोग कैसे किया जा सकता है:

१. डेटा फ़ेचिंग

एक API से डेटा फ़ेच करने के लिए एक कंपोजेबल फ़ंक्शन बनाना एक सामान्य उपयोग का मामला है। यह आपको कई कंपोनेंट्स में समान डेटा-फ़ेचिंग लॉजिक का पुन: उपयोग करने की अनुमति देता है।

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

फिर आप इस कंपोजेबल फ़ंक्शन का उपयोग अपने कंपोनेंट्स में इस तरह कर सकते हैं:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

२. फ़ॉर्म सत्यापन

फ़ॉर्म सत्यापन एक और क्षेत्र है जहाँ कंपोजीशन API बहुत मददगार हो सकता है। आप कंपोजेबल फ़ंक्शन बना सकते हैं जो सत्यापन लॉजिक को समाहित करते हैं और उन्हें विभिन्न फ़ॉर्मों में पुन: उपयोग करते हैं।

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'This field is required'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Invalid email format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

एक कंपोनेंट में उपयोग:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

३. उपयोगकर्ता प्रमाणीकरण का प्रबंधन

प्रमाणीकरण लॉजिक अक्सर जटिल हो सकता है और कई कंपोनेंट्स में दोहराया जा सकता है। कंपोजीशन API आपको एक कंपोजेबल फ़ंक्शन बनाने की अनुमति देता है जो सभी प्रमाणीकरण लॉजिक को समाहित करता है और आपके कंपोनेंट्स को उपयोग करने के लिए एक स्वच्छ API प्रदान करता है।

उदाहरण: (सरलीकृत)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

कंपोजीशन API का उपयोग करने के लिए सर्वोत्तम प्रथाएँ

कंपोजीशन API का अधिकतम लाभ उठाने के लिए, निम्नलिखित सर्वोत्तम प्रथाओं पर विचार करें:

आम मुश्किलें और उनसे कैसे बचें

हालांकि कंपोजीशन API कई लाभ प्रदान करता है, लेकिन कुछ सामान्य नुकसान भी हैं जिनसे अवगत रहना चाहिए:

कंपोजीशन API और वैश्विक टीमें

कंपोजीशन API वैश्विक विकास टीमों के भीतर सहयोग को बढ़ावा देता है:

निष्कर्ष

Vue.js 3 कंपोजीशन API एक शक्तिशाली उपकरण है जो आपके Vue अनुप्रयोगों के संगठन, पुन: प्रयोज्यता और परीक्षण क्षमता में काफी सुधार कर सकता है। इस गहन विश्लेषण में उल्लिखित मूल अवधारणाओं को समझकर और सर्वोत्तम प्रथाओं का पालन करके, आप वैश्विक दर्शकों के लिए अधिक रखरखाव योग्य और स्केलेबल एप्लिकेशन बनाने के लिए कंपोजीशन API का लाभ उठा सकते हैं। कंपोजीशन API को अपनाएं और Vue.js 3 की पूरी क्षमता को अनलॉक करें।

हम आपको अपने स्वयं के प्रोजेक्ट्स में कंपोजीशन API के साथ प्रयोग करने और इसके द्वारा प्रदान की जाने वाली विशाल संभावनाओं का पता लगाने के लिए प्रोत्साहित करते हैं। हैप्पी कोडिंग!