M

MLOG

தமிழ்

Vue.js 3 Composition API-ஐ ஆழமாக ஆராயுங்கள். உலகளாவிய டெவலப்பர்களுக்கான நடைமுறை எடுத்துக்காட்டுகள் மற்றும் சிறந்த நடைமுறைகளுடன், மீண்டும் பயன்படுத்தக்கூடிய, பராமரிக்கக்கூடிய, மற்றும் சோதிக்கக்கூடிய Vue.js பயன்பாடுகளை உருவாக்குவது எப்படி என்பதை அறியுங்கள்.

Vue.js 3 Composition API: உலகளாவிய டெவலப்பர்களுக்கான ஒரு ஆழமான பார்வை

Vue.js அதன் அணுகக்கூடிய கற்றல் வளைவு மற்றும் சக்திவாய்ந்த அம்சங்களுக்கு நன்றி, நவீன வலைப் பயன்பாடுகளை உருவாக்குவதற்கான ஒரு பிரபலமான தேர்வாக விரைவாக மாறியுள்ளது. Vue.js 3, உங்கள் காம்போனென்ட் லாஜிக்கை ஒழுங்கமைப்பதற்கான ஒரு புதிய வழியான Composition API-ஐ அறிமுகப்படுத்துவதன் மூலம் இதை மேலும் மேம்படுத்துகிறது. இந்த ஆழமான பார்வை, Composition API-ஐ திறம்பட புரிந்துகொள்வதற்கும் பயன்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது, மேலும் பராமரிக்கக்கூடிய, மீண்டும் பயன்படுத்தக்கூடிய மற்றும் சோதிக்கக்கூடிய Vue பயன்பாடுகளை உருவாக்கத் தேவையான திறன்களை உங்களுக்கு வழங்குகிறது.

Composition API என்றால் என்ன?

Composition API என்பது, விருப்பங்களை அறிவிப்பதற்குப் பதிலாக, இறக்குமதி செய்யப்பட்ட செயல்பாடுகளைப் பயன்படுத்தி Vue காம்போனென்ட்களை உருவாக்க அனுமதிக்கும் API-களின் தொகுப்பாகும். அடிப்படையில், இது தொடர்புடைய லாஜிக்கை டெம்ப்ளேட்டில் எங்கு தோன்றினாலும் ஒன்றாகக் குழுவாக்க உங்களை அனுமதிக்கிறது. இது Options API (data, methods, computed, watch) உடன் முரண்படுகிறது, இது இந்த முன் வரையறுக்கப்பட்ட வகைகளின் அடிப்படையில் குறியீட்டை ஒழுங்கமைக்க உங்களை கட்டாயப்படுத்துகிறது. Options API-ஐ உங்கள் குறியீட்டை *அது என்ன* (தரவு, முறை, முதலியன) என்பதன் மூலம் ஒழுங்கமைப்பதாக நினைத்துப் பாருங்கள், அதேசமயம் Composition API குறியீட்டை *அது என்ன செய்கிறது* என்பதன் மூலம் ஒழுங்கமைக்க உங்களை அனுமதிக்கிறது.

Composition API-யின் மையமானது setup() செயல்பாட்டைச் சுற்றியே சுழல்கிறது. இந்தச் செயல்பாடு ஒரு காம்போனென்டிற்குள் Composition API-ஐப் பயன்படுத்துவதற்கான நுழைவாயிலாகும். setup() உள்ளே, நீங்கள் ரியாக்டிவ் ஸ்டேட், கணக்கிடப்பட்ட பண்புகள், முறைகள் மற்றும் வாழ்க்கைச் சுழற்சி ஹூக்குகளை கம்போசபிள் செயல்பாடுகளைப் பயன்படுத்தி வரையறுக்கலாம்.

Composition API-ஐ ஏன் பயன்படுத்த வேண்டும்?

பாரம்பரிய Options API-ஐ விட, குறிப்பாக பெரிய மற்றும் சிக்கலான பயன்பாடுகளுக்கு, Composition API பல நன்மைகளை வழங்குகிறது:

முக்கிய கருத்துக்களைப் புரிந்துகொள்ளுதல்

Composition API-க்கு அடிப்படையாக இருக்கும் முக்கிய கருத்துக்களைப் பற்றி விரிவாகப் பார்ப்போம்:

1. setup()

முன்பு குறிப்பிட்டபடி, setup() என்பது Composition API-ஐப் பயன்படுத்துவதற்கான நுழைவாயிலாகும். இது காம்போனென்ட் உருவாக்கப்படுவதற்கு முன்பு செயல்படுத்தப்படும் ஒரு காம்போனென்ட் விருப்பமாகும். 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 உடன் ரியாக்டிவ் ஸ்டேட்

Composition API ரியாக்டிவ் ஸ்டேட்டை உருவாக்க இரண்டு முக்கிய செயல்பாடுகளை வழங்குகிறது: ref மற்றும் reactive.

ref ஐப் பயன்படுத்தும் உதாரணம்:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('வணக்கம், Vue!')

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

    return {
      message,
      updateMessage
    }
  }
}

reactive ஐப் பயன்படுத்தும் உதாரணம்:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'ஜான் டோ',
      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('ஜான்')
    const lastName = ref('டோ')

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

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

இந்த எடுத்துக்காட்டில், fullName என்பது firstName மற்றும் lastName-ஐ சார்ந்துள்ள ஒரு கணக்கிடப்பட்ட பண்பு ஆகும். firstName அல்லது lastName மாறும் போதெல்லாம், fullName தானாகவே புதுப்பிக்கப்படும்.

4. watch மற்றும் watchEffect உடன் வாட்சர்கள்

வாட்சர்கள் ரியாக்டிவ் ஸ்டேட்டில் ஏற்படும் மாற்றங்களுக்கு எதிர்வினையாற்ற உங்களை அனுமதிக்கின்றன. Composition API வாட்சர்களை உருவாக்க இரண்டு முக்கிய வழிகளை வழங்குகிறது: watch மற்றும் watchEffect.

watch ஐப் பயன்படுத்தும் உதாரணம்:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`எண்ணிக்கை ${oldValue} இலிருந்து ${newValue} ஆக மாறியுள்ளது`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

watchEffect ஐப் பயன்படுத்தும் உதாரணம்:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('வணக்கம்')

    watchEffect(() => {
      console.log(`செய்தி: ${message.value}`)
    })

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

    return {
      message,
      updateMessage
    }
  }
}

5. வாழ்க்கைச் சுழற்சி ஹூக்குகள்

Composition API, onMounted, onUpdated, மற்றும் onUnmounted போன்ற on உடன் தொடங்கும் செயல்பாடுகள் மூலம் காம்போனென்ட் வாழ்க்கைச் சுழற்சி ஹூக்குகளுக்கான அணுகலை வழங்குகிறது. இந்தச் செயல்பாடுகள் ஒரு கால்பேக்கை ஒரு வாதமாக எடுத்துக்கொள்கின்றன, இது தொடர்புடைய வாழ்க்கைச் சுழற்சி ஹூக் தூண்டப்படும்போது செயல்படுத்தப்படும்.

உதாரணம்:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('காம்போனென்ட் மவுண்ட் செய்யப்பட்டது')
    })

    onUnmounted(() => {
      console.log('காம்போனென்ட் அன்மவுண்ட் செய்யப்பட்டது')
    })

    return {}
  }
}

கம்போசபிள் செயல்பாடுகளை உருவாக்குதல்

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

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

Composition 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. படிவ சரிபார்ப்பு

படிவ சரிபார்ப்பு என்பது Composition 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 = 'இந்த புலம் தேவை'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'தவறான மின்னஞ்சல் வடிவம்'
        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. பயனர் அங்கீகாரத்தை நிர்வகித்தல்

அங்கீகார லாஜிக் பெரும்பாலும் சிக்கலானதாகவும், பல காம்போனென்ட்களில் நகலெடுக்கப்பட்டதாகவும் இருக்கலாம். Composition API அனைத்து அங்கீகார லாஜிக்கையும் உள்ளடக்கிய ஒரு கம்போசபிள் செயல்பாட்டை உருவாக்கவும், உங்கள் காம்போனென்ட்கள் பயன்படுத்த ஒரு சுத்தமான API-ஐ வழங்கவும் உங்களை அனுமதிக்கிறது.

உதாரணம்: (எளிமைப்படுத்தப்பட்டது)

import { ref } from 'vue'

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

  const login = async (username, password) => {
    // API அழைப்பை உருவகப்படுத்துதல்
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // API அழைப்பை உருவகப்படுத்துதல்
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Composition API-ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

Composition API-யிலிருந்து அதிகப் பலனைப் பெற, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

பொதுவான ஆபத்துகளும் அவற்றை எவ்வாறு தவிர்ப்பது என்பதும்

Composition API பல நன்மைகளை வழங்கினாலும், எச்சரிக்கையாக இருக்க வேண்டிய சில பொதுவான ஆபத்துகளும் உள்ளன:

Composition API மற்றும் உலகளாவிய அணிகள்

Composition API உலகளாவிய டெவலப்மெண்ட் அணிகளுக்குள் ஒத்துழைப்பை ஊக்குவிக்கிறது:

முடிவுரை

Vue.js 3 Composition API உங்கள் Vue பயன்பாடுகளின் அமைப்பு, மறுபயன்பாடு மற்றும் சோதனையியல்பை கணிசமாக மேம்படுத்தக்கூடிய ஒரு சக்திவாய்ந்த கருவியாகும். இந்த ஆழமான பார்வையில் கோடிட்டுக் காட்டப்பட்டுள்ள முக்கிய கருத்துக்களைப் புரிந்துகொண்டு சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உலகளாவிய பார்வையாளர்களுக்காக மேலும் பராமரிக்கக்கூடிய மற்றும் அளவிடக்கூடிய பயன்பாடுகளை உருவாக்க Composition API-ஐ நீங்கள் பயன்படுத்தலாம். Composition API-ஐ ஏற்றுக்கொண்டு, Vue.js 3-இன் முழுத் திறனையும் திறக்கவும்.

உங்கள் சொந்த திட்டங்களில் Composition API-ஐ பரிசோதனை செய்து, அது வழங்கும் பரந்த சாத்தியக்கூறுகளை ஆராய நாங்கள் உங்களை ஊக்குவிக்கிறோம். மகிழ்ச்சியான கோடிங்!