M

MLOG

മലയാളം

Vue.js 3 കോമ്പോസിഷൻ API-യെക്കുറിച്ച് ആഴത്തിൽ പഠിക്കാം. പുനരുപയോഗിക്കാവുന്നതും, പരിപാലിക്കാവുന്നതും, പരീക്ഷിക്കാവുന്നതുമായ Vue.js ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ പ്രായോഗിക ഉദാഹരണങ്ങളിലൂടെ പഠിക്കുക.

Vue.js 3 കോമ്പോസിഷൻ API: ആഗോള ഡെവലപ്പർമാർക്കായി ഒരു സമഗ്രമായ വിശകലനം

Vue.js അതിൻ്റെ ലളിതമായ പഠനരീതിയും ശക്തമായ ഫീച്ചറുകളും കാരണം ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു ജനപ്രിയ തിരഞ്ഞെടുപ്പായി മാറിയിരിക്കുന്നു. കോമ്പോസിഷൻ API-യുടെ അവതരണത്തോടെ Vue.js 3 ഇതിനെ കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു, ഇത് നിങ്ങളുടെ കമ്പോണന്റ് ലോജിക് ഓർഗനൈസുചെയ്യാനുള്ള ഒരു പുതിയ മാർഗ്ഗമാണ്. ഈ വിശകലനം കോമ്പോസിഷൻ API ഫലപ്രദമായി മനസിലാക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനും ഒരു സമഗ്രമായ ഗൈഡ് നൽകുന്നു, കൂടുതൽ പരിപാലിക്കാവുന്നതും പുനരുപയോഗിക്കാവുന്നതും പരീക്ഷിക്കാവുന്നതുമായ Vue ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള കഴിവുകൾ നിങ്ങളെ സജ്ജരാക്കുന്നു.

എന്താണ് കോമ്പോസിഷൻ API?

ഓപ്ഷനുകൾ ഡിക്ലയർ ചെയ്യുന്നതിന് പകരം ഇമ്പോർട്ട് ചെയ്ത ഫംഗ്ഷനുകൾ ഉപയോഗിച്ച് Vue കമ്പോണന്റുകൾ എഴുതാൻ സഹായിക്കുന്ന API-കളുടെ ഒരു കൂട്ടമാണ് കോമ്പോസിഷൻ API. പ്രധാനമായും, ടെംപ്ലേറ്റിൽ എവിടെ പ്രത്യക്ഷപ്പെട്ടാലും ബന്ധപ്പെട്ട ലോജിക്കുകളെ ഒരുമിച്ച് ഗ്രൂപ്പ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് ഓപ്ഷൻസ് API-ൽ (data, methods, computed, watch) നിന്ന് വ്യത്യസ്തമാണ്, കാരണം ഓപ്ഷൻസ് API മുൻകൂട്ടി നിശ്ചയിച്ച ഈ വിഭാഗങ്ങളെ അടിസ്ഥാനമാക്കി കോഡ് ഓർഗനൈസുചെയ്യാൻ നിർബന്ധിക്കുന്നു. ഓപ്ഷൻസ് API നിങ്ങളുടെ കോഡിനെ അത് *എന്താണ്* (ഡാറ്റ, മെത്തേഡ്, മുതലായവ) എന്നതിനെ അടിസ്ഥാനമാക്കി ഓർഗനൈസുചെയ്യുന്നു എന്ന് കരുതുക, അതേസമയം കോമ്പോസിഷൻ API കോഡിനെ അത് *എന്ത് ചെയ്യുന്നു* എന്നതിനെ അടിസ്ഥാനമാക്കി ഓർഗനൈസുചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

കോമ്പോസിഷൻ API-യുടെ കാതൽ setup() ഫംഗ്ഷനാണ്. ഒരു കമ്പോണന്റിനുള്ളിൽ കോമ്പോസിഷൻ API ഉപയോഗിക്കുന്നതിനുള്ള എൻട്രി പോയിന്റാണ് ഈ ഫംഗ്ഷൻ. setup()-നുള്ളിൽ, നിങ്ങൾക്ക് കോമ്പോസിബിൾ ഫംഗ്ഷനുകൾ ഉപയോഗിച്ച് റിയാക്ടീവ് സ്റ്റേറ്റ്, കമ്പ്യൂട്ടഡ് പ്രോപ്പർട്ടികൾ, മെത്തേഡുകൾ, ലൈഫ് സൈക്കിൾ ഹുക്കുകൾ എന്നിവ നിർവചിക്കാം.

എന്തുകൊണ്ട് കോമ്പോസിഷൻ API ഉപയോഗിക്കണം?

പ്രത്യേകിച്ച് വലുതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകൾക്ക്, പരമ്പരാഗത ഓപ്ഷൻസ് API-യെക്കാൾ കോമ്പോസിഷൻ API നിരവധി ഗുണങ്ങൾ നൽകുന്നു:

അടിസ്ഥാന ആശയങ്ങൾ മനസ്സിലാക്കാം

കോമ്പോസിഷൻ API-യുടെ അടിസ്ഥാനമായ പ്രധാന ആശയങ്ങളിലേക്ക് കടക്കാം:

1. setup()

നേരത്തെ സൂചിപ്പിച്ചതുപോലെ, കോമ്പോസിഷൻ API ഉപയോഗിക്കുന്നതിനുള്ള എൻട്രി പോയിന്റാണ് setup(). കമ്പോണന്റ് നിർമ്മിക്കുന്നതിന് മുമ്പ് എക്സിക്യൂട്ട് ചെയ്യുന്ന ഒരു കമ്പോണന്റ് ഓപ്ഷനാണിത്. setup()-നുള്ളിൽ, നിങ്ങൾ റിയാക്ടീവ് സ്റ്റേറ്റ്, കമ്പ്യൂട്ടഡ് പ്രോപ്പർട്ടികൾ, മെത്തേഡുകൾ, ലൈഫ് സൈക്കിൾ ഹുക്കുകൾ എന്നിവ നിർവചിക്കുകയും, തുടർന്ന് ടെംപ്ലേറ്റിലേക്ക് എക്സ്പോസ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന മൂല്യങ്ങൾ അടങ്ങുന്ന ഒരു ഒബ്ജക്റ്റ് റിട്ടേൺ ചെയ്യുകയും ചെയ്യുന്നു.

ഉദാഹരണം:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

ഈ ഉദാഹരണത്തിൽ, count എന്ന പേരിൽ ഒരു റിയാക്ടീവ് വേരിയബിൾ ഉണ്ടാക്കാൻ നമ്മൾ ref ഉപയോഗിക്കുന്നു. count-ന്റെ മൂല്യം വർദ്ധിപ്പിക്കുന്ന increment എന്ന ഒരു മെത്തേഡും നമ്മൾ നിർവചിക്കുന്നു. അവസാനമായി, 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 ഫംഗ്ഷൻ ഒരു ഗെറ്റർ ഫംഗ്ഷൻ ആർഗ്യുമെന്റായി എടുക്കുകയും വായിക്കാൻ മാത്രമുള്ള ഒരു റിയാക്ടീവ് ref നൽകുകയും ചെയ്യുന്നു.

ഉദാഹരണം:

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. ലൈഫ് സൈക്കിൾ ഹുക്കുകൾ

onMounted, onUpdated, onUnmounted എന്നിങ്ങനെ on-ൽ തുടങ്ങുന്ന ഫംഗ്ഷനുകളിലൂടെ കോമ്പോസിഷൻ API കമ്പോണന്റ് ലൈഫ് സൈക്കിൾ ഹുക്കുകളിലേക്ക് ആക്സസ് നൽകുന്നു. ഈ ഫംഗ്ഷനുകൾ ഒരു കോൾബാക്ക് ആർഗ്യുമെന്റായി എടുക്കുന്നു, അനുബന്ധ ലൈഫ് സൈക്കിൾ ഹുക്ക് ട്രിഗർ ചെയ്യുമ്പോൾ അത് എക്സിക്യൂട്ട് ചെയ്യപ്പെടും.

ഉദാഹരണം:

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 പരീക്ഷിക്കാനും അത് നൽകുന്ന വിശാലമായ സാധ്യതകൾ പര്യവേക്ഷണം ചെയ്യാനും ഞങ്ങൾ നിങ്ങളെ പ്രോത്സാഹിപ്പിക്കുന്നു. സന്തോഷകരമായ കോഡിംഗ്!