M

MLOG

ગુજરાતી

Vue.js 3 કમ્પોઝિશન APIનો ઊંડાણપૂર્વક અભ્યાસ કરો. વિશ્વભરના ડેવલપર્સ માટે વ્યવહારુ ઉદાહરણો અને શ્રેષ્ઠ પદ્ધતિઓ સાથે પુનઃઉપયોગી, જાળવણીક્ષમ અને પરીક્ષણક્ષમ Vue.js એપ્લિકેશન્સ કેવી રીતે બનાવવી તે શીખો.

Vue.js 3 કમ્પોઝિશન API: વૈશ્વિક ડેવલપર્સ માટે ઊંડાણપૂર્વકનો અભ્યાસ

Vue.js તેની સરળ શીખવાની પ્રક્રિયા અને શક્તિશાળી સુવિધાઓને કારણે, આધુનિક વેબ એપ્લિકેશન્સ બનાવવા માટે ઝડપથી એક લોકપ્રિય પસંદગી બની ગયું છે. Vue.js 3 કમ્પોઝિશન API ની રજૂઆત સાથે આને વધુ આગળ લઈ જાય છે, જે તમારા કમ્પોનન્ટ લોજિકને ગોઠવવાની એક નવી રીત છે. આ ઊંડાણપૂર્વકનો અભ્યાસ કમ્પોઝિશન API ને અસરકારક રીતે સમજવા અને તેનો ઉપયોગ કરવા માટે એક વ્યાપક માર્ગદર્શિકા પૂરી પાડે છે, જે તમને વધુ જાળવણીક્ષમ, પુનઃઉપયોગી અને પરીક્ષણક્ષમ Vue એપ્લિકેશન્સ બનાવવાની કુશળતાથી સજ્જ કરે છે.

કમ્પોઝિશન API શું છે?

કમ્પોઝિશન API એ API નો સમૂહ છે જે આપણને ઓપ્શન્સ જાહેર કરવાને બદલે ઇમ્પોર્ટેડ ફંક્શન્સનો ઉપયોગ કરીને Vue કમ્પોનન્ટ્સ લખવાની મંજૂરી આપે છે. મૂળભૂત રીતે, તે તમને સંબંધિત લોજિકને એકસાથે જૂથબદ્ધ કરવાની મંજૂરી આપે છે, ભલે તે ટેમ્પલેટમાં ક્યાં દેખાય. આ ઓપ્શન્સ API (data, methods, computed, watch) થી વિપરીત છે, જે તમને આ પૂર્વવ્યાખ્યાયિત શ્રેણીઓના આધારે કોડને ગોઠવવા માટે દબાણ કરે છે. ઓપ્શન્સ API ને તમારા કોડને તે *શું છે* (ડેટા, મેથડ, વગેરે) દ્વારા ગોઠવવા તરીકે વિચારો, જ્યારે કમ્પોઝિશન API તમને કોડને તે *શું કરે છે* દ્વારા ગોઠવવા દે છે.

કમ્પોઝિશન API નો મુખ્ય આધાર setup() ફંક્શનની આસપાસ ફરે છે. આ ફંક્શન કમ્પોનન્ટની અંદર કમ્પોઝિશન API નો ઉપયોગ કરવા માટેનો પ્રવેશ બિંદુ છે. setup() ની અંદર, તમે કમ્પોઝેબલ ફંક્શન્સનો ઉપયોગ કરીને રિએક્ટિવ સ્ટેટ, કમ્પ્યુટેડ પ્રોપર્ટીઝ, મેથડ્સ અને લાઇફસાયકલ હુક્સને વ્યાખ્યાયિત કરી શકો છો.

કમ્પોઝિશન API નો ઉપયોગ શા માટે કરવો?

કમ્પોઝિશન API પરંપરાગત ઓપ્શન્સ API ની સરખામણીમાં ઘણા ફાયદાઓ પ્રદાન કરે છે, ખાસ કરીને મોટી અને વધુ જટિલ એપ્લિકેશન્સ માટે:

મુખ્ય ખ્યાલોને સમજવું

ચાલો આપણે કમ્પોઝિશન API ને આધાર આપતા મુખ્ય ખ્યાલોમાં ઊંડા ઉતરીએ:

1. 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 ધરાવતો એક ઓબ્જેક્ટ પરત કરીએ છીએ, જે તેમને કમ્પોનન્ટના ટેમ્પલેટમાં ઉપલબ્ધ કરાવે છે.

2. 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
    }
  }
}

3. 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 આપમેળે અપડેટ થઈ જશે.

4. 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
    }
  }
}

5. લાઇફસાયકલ હુક્સ

કમ્પોઝિશન 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 નો વાસ્તવિક-વિશ્વના દૃશ્યોમાં કેવી રીતે ઉપયોગ કરી શકાય છે:

1. ડેટા ફેચિંગ

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
    }
  }
}

2. ફોર્મ વેલિડેશન

ફોર્મ વેલિડેશન એ બીજું ક્ષેત્ર છે જ્યાં કમ્પોઝિશન 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
    }
  }
}

3. વપરાશકર્તા પ્રમાણીકરણનું સંચાલન

પ્રમાણીકરણ લોજિક ઘણીવાર જટિલ હોય છે અને બહુવિધ કમ્પોનન્ટ્સમાં ડુપ્લિકેટ થાય છે. કમ્પોઝિશન 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 સાથે પ્રયોગ કરવા અને તે જે વિશાળ શક્યતાઓ પ્રદાન કરે છે તેનું અન્વેષણ કરવા માટે પ્રોત્સાહિત કરીએ છીએ. હેપી કોડિંગ!