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 सह प्रयोग करण्यास आणि ते देत असलेल्या विशाल शक्यतांचा शोध घेण्यास प्रोत्साहित करतो. हॅपी कोडिंग!