Vue.js 3 Composition API: Global Dasturchilar uchun Chuqur O'rganish

Vue.js o'zining sodda o'rganish egri chizig'i va kuchli xususiyatlari tufayli zamonaviy veb-ilovalar yaratish uchun tezda mashhur tanlovga aylandi. Vue.js 3 bu yo'nalishni Composition API ni joriy etish bilan yanada rivojlantirdi, bu sizning komponent mantiqingizni tashkil etishning yangi usulidir. Ushbu chuqur o'rganish Composition API ni samarali tushunish va undan foydalanish bo'yicha keng qamrovli qo'llanmani taqdim etadi va sizni yanada qo'llab-quvvatlanadigan, qayta ishlatiladigan va sinovdan o'tkaziladigan Vue ilovalarini yaratish ko'nikmalari bilan ta'minlaydi.

Composition API nima?

Composition API — bu bizga variantlarni e'lon qilish o'rniga import qilingan funksiyalardan foydalanib Vue komponentlarini yaratish imkonini beruvchi API lar to'plamidir. Asosan, u shablonda qayerda paydo bo'lishidan qat'i nazar, bog'liq mantiqni bir guruhga to'plash imkonini beradi. Bu kodni oldindan belgilangan toifalarga asoslanib tashkil etishga majbur qiladigan Options API (data, methods, computed, watch) dan farq qiladi. Options API ni kodingizni uning *nima* ekanligiga (ma'lumot, metod va hokazo) qarab tashkil etish deb o'ylang, Composition API esa kodni *nima qilishiga* qarab tashkil etishga imkon beradi.

Composition API ning yadrosi setup() funksiyasi atrofida aylanadi. Bu funksiya komponent ichida Composition API dan foydalanish uchun kirish nuqtasi hisoblanadi. setup() ichida siz kompozitsiyalanadigan (composable) funksiyalardan foydalanib, reaktiv holat, hisoblanadigan xususiyatlar, metodlar va hayotiy sikl ilgaklarini (lifecycle hooks) aniqlashingiz mumkin.

Nima uchun Composition API dan foydalanish kerak?

Composition API an'anaviy Options API ga nisbatan, ayniqsa, katta va murakkab ilovalar uchun bir nechta afzalliklarni taklif etadi:

• Yaxshilangan kod tashkiloti: Composition API sizga bog'liq mantiqni kompozitsiyalanadigan funksiyalarga guruhlash imkonini beradi, bu esa kodingizni yanada tartibli va tushunarli qiladi. Bog'liq kodni turli Options API xususiyatlari bo'ylab tarqatish o'rniga, siz uni bir joyda saqlashingiz mumkin. Bu, ayniqsa, bir nechta xususiyatlarni o'z ichiga olgan murakkab komponentlar bilan ishlashda foydalidir.
• Kengaytirilgan qayta foydalanish imkoniyati: Kompozitsiyalanadigan funksiyalarni osongina ajratib olish va bir nechta komponentlarda qayta ishlatish mumkin. Bu kodni qayta ishlatishni rag'batlantiradi va takrorlanishni kamaytiradi, bu esa yanada samarali dasturlashga olib keladi. Bu ilovangiz bo'ylab izchil foydalanuvchi tajribasini saqlab qolish uchun o'yinni o'zgartiruvchi omil.
• Yaxshiroq sinovdan o'tkazish imkoniyati: Composition API alohida kompozitsiyalanadigan funksiyalarni alohida sinovdan o'tkazishga imkon berish orqali birlik testlashni osonlashtiradi. Bu xatolarni aniqlash va tuzatishni osonlashtiradi, natijada yanada mustahkam va ishonchli ilovalar yaratiladi.
• Turlar xavfsizligi: TypeScript bilan birgalikda ishlatilganda, Composition API a'lo darajadagi turlar xavfsizligini ta'minlaydi va dasturlash jarayonida yuzaga kelishi mumkin bo'lgan xatolarni ushlaydi. Bu kodingizning umumiy sifati va qo'llab-quvvatlanishini sezilarli darajada yaxshilashi mumkin.
• Mantiqiy ajratib olish va qayta ishlatish: Composition API komponentingizning mantiqiy qismlarini ajratib olish va qayta ishlatishni osonlashtiradi. Bu, ayniqsa, ma'lumotlarni olish, formani tasdiqlash yoki foydalanuvchi autentifikatsiyasini boshqarish kabi ko'pincha bir nechta komponentlarda almashinishi kerak bo'lgan xususiyatlar bilan ishlashda foydalidir.

Asosiy Tushunchalarni Tushunish

Keling, Composition API asosini tashkil etuvchi asosiy tushunchalarni ko'rib chiqamiz:

1. setup()

Yuqorida aytib o'tilganidek, setup() Composition API dan foydalanish uchun kirish nuqtasi hisoblanadi. Bu komponent yaratilishidan oldin bajariladigan komponent variantidir. setup() ichida siz reaktiv holat, hisoblanadigan xususiyatlar, metodlar va hayotiy sikl ilgaklarini aniqlaysiz, so'ngra shablonga ochib berishni istagan qiymatlarni o'z ichiga olgan obyektni qaytarasiz.

Misol:

import { ref } from 'vue'

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

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

    return {
      count,
      increment
    }
  }
}

Ushbu misolda biz ref dan count deb nomlangan reaktiv o'zgaruvchi yaratish uchun foydalanyapmiz. Shuningdek, count qiymatini oshiradigan increment nomli metodni aniqlaymiz. Nihoyat, biz count va increment ni o'z ichiga olgan obyektni qaytaramiz, bu ularni komponent shablonida mavjud qiladi.

2. ref va reactive bilan Reaktiv Holat

Composition API reaktiv holat yaratish uchun ikkita asosiy funksiyani taqdim etadi: ref va reactive.

• ref: ref oddiy qiymatni (son, satr, mantiqiy va hk.) qabul qiladi va reaktiv va o'zgaruvchan ref obyektini qaytaradi. Qiymat ref ning .value xususiyati orqali olinadi va o'zgartiriladi. Yagona qiymatdagi o'zgarishlarni kuzatmoqchi bo'lsangiz, ref dan foydalaning.
• reactive: reactive obyektni qabul qiladi va ushbu obyektning reaktiv proksisini qaytaradi. Reaktiv obyekt xususiyatlaridagi o'zgarishlar komponentdagi yangilanishlarni ishga tushiradi. Obyekt ichidagi bir nechta xususiyatlardagi o'zgarishlarni kuzatmoqchi bo'lsangiz, reactive dan foydalaning.

ref yordamida misol:

import { ref } from 'vue'

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

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

    return {
      message,
      updateMessage
    }
  }
}

reactive yordamida misol:

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 bilan Hisoblanadigan Xususiyatlar

Hisoblanadigan xususiyatlar boshqa reaktiv holatlardan olingan qiymatlardir. Ular bog'liqliklari o'zgarganda avtomatik ravishda yangilanadi. computed funksiyasi argument sifatida getter funksiyasini oladi va faqat o'qish uchun mo'ljallangan reaktiv ref ni qaytaradi.

Misol:

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

Ushbu misolda, fullName - bu firstName va lastName ga bog'liq bo'lgan hisoblanadigan xususiyat. firstName yoki lastName o'zgarganda, fullName avtomatik ravishda yangilanadi.

4. watch va watchEffect bilan Kuzatuvchilar

Kuzatuvchilar reaktiv holatdagi o'zgarishlarga reaksiya bildirish imkonini beradi. Composition API kuzatuvchilarni yaratishning ikkita asosiy usulini taqdim etadi: watch va watchEffect.

• watch: watch sizga qaysi reaktiv bog'liqliklarni kuzatish kerakligini aniq belgilash imkonini beradi. U birinchi argument sifatida bir yoki bir nechta reaktiv havolalarni (reflar, hisoblanadigan xususiyatlar yoki reaktiv obyektlar) va ikkinchi argument sifatida qayta chaqiruv (callback) funksiyasini oladi. Qayta chaqiruv funksiyasi belgilangan bog'liqliklardan biri o'zgarganda bajariladi.
• watchEffect: watchEffect o'zining qayta chaqiruv funksiyasi ichida ishlatilgan barcha reaktiv bog'liqliklarni avtomatik ravishda kuzatadi. Qayta chaqiruv funksiyasi dastlab va keyin kuzatilgan bog'liqliklardan biri o'zgarganda qayta bajariladi. Bu reaktiv holat o'zgarishlariga asoslangan yon ta'sirlarni bog'liqliklarni aniq belgilamasdan bajarishni istaganingizda foydalidir. Biroq, watchEffect bilan ehtiyot bo'ling, chunki u juda ko'p bog'liqliklarni kuzatsa, ba'zida ishlash samaradorligi bilan bog'liq muammolarga olib kelishi mumkin.

watch yordamida misol:

import { ref, watch } from 'vue'

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

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Hisob ${oldValue} dan ${newValue} ga o'zgardi`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

watchEffect yordamida misol:

import { ref, watchEffect } from 'vue'

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

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

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

    return {
      message,
      updateMessage
    }
  }
}

5. Hayotiy Sikl Ilgaklari

Composition API onMounted, onUpdated va onUnmounted kabi on bilan boshlanadigan funksiyalar orqali komponent hayotiy sikl ilgaklariga kirish imkonini beradi. Ushbu funksiyalar argument sifatida qayta chaqiruv funksiyasini oladi, bu funksiya tegishli hayotiy sikl ilgagi ishga tushirilganda bajariladi.

Misol:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Komponent o\'rnatildi')
    })

    onUnmounted(() => {
      console.log('Komponent o\'chirildi')
    })

    return {}
  }
}

Kompozitsiyalanadigan Funksiyalarni Yaratish

Composition API ning haqiqiy kuchi qayta ishlatiladigan kompozitsiyalanadigan funksiyalarni yaratish qobiliyatidan kelib chiqadi. Kompozitsiyalanadigan funksiya — bu shunchaki komponent mantiqining bir qismini o'z ichiga olgan va bir nechta komponentlarda ishlatilishi mumkin bo'lgan reaktiv holat va funksiyalarni qaytaradigan funksiyadir.

Misol: Keling, sichqoncha pozitsiyasini kuzatuvchi kompozitsiyalanadigan funksiya yaratamiz:

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

Endi siz ushbu kompozitsiyalanadigan funksiyani istalgan komponentda ishlatishingiz mumkin:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Amaliy Misollar va Qo'llash Holatlari

Keling, Composition API ni real hayotiy stsenariylarda qanday ishlatish mumkinligini ko'rsatadigan ba'zi amaliy misollarni o'rganamiz:

1. Ma'lumotlarni Olish

API dan ma'lumotlarni olish uchun kompozitsiyalanadigan funksiya yaratish keng tarqalgan holatdir. Bu sizga bir xil ma'lumotlarni olish mantiqini bir nechta komponentlarda qayta ishlatishga imkon beradi.

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

Keyin ushbu kompozitsiyalanadigan funksiyani komponentlaringizda quyidagicha ishlatishingiz mumkin:

import { useFetch } from './useFetch'

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

    return {
      data,
      error,
      loading
    }
  }
}

2. Formani Tasdiqlash

Formani tasdiqlash — bu Composition API juda foydali bo'lishi mumkin bo'lgan yana bir soha. Siz tasdiqlash mantiqini o'z ichiga olgan kompozitsiyalanadigan funksiyalarni yaratishingiz va ularni turli formalarda qayta ishlatishingiz mumkin.

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 = 'Bu maydon to\'ldirilishi shart'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Email formati noto\'g\'ri'
        break
      }
    }

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

  return {
    errors,
    validateField
  }
}

Komponentda foydalanish:

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. Foydalanuvchi Autentifikatsiyasini Boshqarish

Autentifikatsiya mantiqi ko'pincha murakkab bo'lishi va bir nechta komponentlarda takrorlanishi mumkin. Composition API sizga barcha autentifikatsiya mantiqini o'z ichiga olgan kompozitsiyalanadigan funksiya yaratish va komponentlaringiz uchun toza API taqdim etish imkonini beradi.

Misol: (Soddalashtirilgan)

import { ref } from 'vue'

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

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

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

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Composition API dan foydalanishning eng yaxshi amaliyotlari

Composition API dan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

• Kompozitsiyalanadigan funksiyalarni yo'naltirilgan holda saqlang: Har bir kompozitsiyalanadigan funksiya yagona, aniq belgilangan maqsadga ega bo'lishi kerak. Bu ularni tushunish, qayta ishlatish va sinovdan o'tkazishni osonlashtiradi.
• Tavsiflovchi nomlardan foydalaning: Kompozitsiyalanadigan funksiyaning maqsadini aniq ko'rsatadigan nomlarni tanlang. Bu kodingizni yanada o'qiladigan va qo'llab-quvvatlanadigan qiladi.
• Faqat kerakli narsani qaytaring: Faqat komponentga haqiqatan ham kerak bo'lgan reaktiv holat va funksiyalarni qaytaring. Bu komponentlaringizning murakkabligini kamaytirishga va ishlash samaradorligini oshirishga yordam beradi.
• TypeScript dan foydalanishni ko'rib chiqing: TypeScript ajoyib turlar xavfsizligini ta'minlaydi va dasturlash jarayonida xatolarni erta aniqlashga yordam beradi. Bu ayniqsa Composition API bilan ishlaganda foydalidir.
• Kompozitsiyalanadigan funksiyalaringizni hujjatlashtiring: Kompozitsiyalanadigan funksiyalaringizga ularning maqsadi, qanday ishlashi va mavjud bo'lgan bog'liqliklarini tushuntirish uchun izohlar qo'shing. Bu boshqa dasturchilar (va kelajakdagi o'zingiz) uchun kodingizni tushunish va ishlatishni osonlashtiradi.
• Kompozitsiyalanadigan funksiyalaringizni sinovdan o'tkazing: Kompozitsiyalanadigan funksiyalaringiz to'g'ri ishlayotganiga ishonch hosil qilish uchun birlik testlarini yozing. Bu xatolarni erta aniqlashga va kodingizning umumiy sifatini oshirishga yordam beradi.
• Izchil uslubdan foydalaning: Kompozitsiyalanadigan funksiyalaringiz uchun izchil uslubni o'rnating va unga rioya qiling. Bu kodingizni yanada o'qiladigan va qo'llab-quvvatlanadigan qiladi.

Umumiy xatolar va ulardan qanday qochish kerak

Composition API ko'plab afzalliklarni taklif qilsa-da, e'tiborga olinishi kerak bo'lgan ba'zi umumiy xatolar ham mavjud:

• Kompozitsiyalanadigan funksiyalarni haddan tashqari murakkablashtirish: Had_dan tashqari ishtiyoqqa berilib, juda murakkab kompozitsiyalanadigan funksiyalarni yaratish oson. Ularni yo'naltirilgan va sodda saqlashga harakat qiling. Agar kompozitsiyalanadigan funksiya juda katta bo'lib ketsa, uni kichikroq, boshqariladigan qismlarga bo'lishni ko'rib chiqing.
• Tasodifiy reaktivlik muammolari: ref va reactive qanday ishlashini tushunganingizga va ulardan to'g'ri foydalanayotganingizga ishonch hosil qiling. Masalan, ref ning ichki xususiyatini uni ochmasdan to'g'ridan-to'g'ri o'zgartirish kutilmagan xatti-harakatlarga olib kelishi mumkin.
• Hayotiy sikl ilgaklarini noto'g'ri ishlatish: Hayotiy sikl ilgaklarining vaqtiga e'tibor bering va ulardan to'g'ri foydalanayotganingizga ishonch hosil qiling. Masalan, DOM elementlariga onBeforeMount da kirishga harakat qilmang, chunki ular hali yaratilmagan bo'ladi.
• watchEffect bilan ishlash samaradorligi muammolari: watchEffect tomonidan kuzatiladigan bog'liqliklarga e'tiborli bo'ling. Agar u juda ko'p bog'liqliklarni kuzatsa, bu ishlash samaradorligi bilan bog'liq muammolarga olib kelishi mumkin. Kuzatmoqchi bo'lgan bog'liqliklarni aniq belgilash uchun o'rniga watch dan foydalanishni ko'rib chiqing.
• Hodisa tinglovchilarini ro'yxatdan o'chirishni unutish: Kompozitsiyalanadigan funksiya ichida hodisa tinglovchilaridan foydalanganda, xotira sizib chiqishini oldini olish uchun ularni onUnmounted ilgagida ro'yxatdan o'chirganingizga ishonch hosil qiling.

Composition API va Global Jamoalar

Composition API global dasturlash jamoalari ichida hamkorlikni quyidagilar orqali rivojlantiradi:

• Standartlashtirilgan kod tuzilmasi: Kompozitsiyalanadigan funksiyalarga urg'u berish kodni tashkil etish uchun aniq va izchil naqshni taqdim etadi, bu esa turli madaniyatlarga mansub jamoa a'zolari uchun kod bazasini tushunish va unga hissa qo'shishni osonlashtiradi.
• Modulli dizayn: Murakkab mantiqni qayta ishlatiladigan kompozitsiyalarga ajratish yanada modulli dizaynga imkon beradi, bu yerda turli jamoa a'zolari bir-birining ishiga xalaqit bermasdan ilovaning mustaqil qismlari ustida ishlashlari mumkin.
• Yaxshilangan kodni ko'rib chiqish: Kompozitsiyalanadigan funksiyalarning yo'naltirilgan tabiati kodni ko'rib chiqishni soddalashtiradi, chunki ko'rib chiquvchilar har bir kompozitsiyaning maqsadi va funksionalligini osongina tushunishlari mumkin.
• Bilim almashinuvi: Kompozitsiyalanadigan funksiyalar o'z-o'zidan mustaqil bilim birliklari sifatida harakat qiladi, ularni turli loyihalar va jamoalar o'rtasida osongina almashish va qayta ishlatish mumkin.

Xulosa

Vue.js 3 Composition API — bu sizning Vue ilovalaringizning tashkil etilishi, qayta ishlatilishi va sinovdan o'tkazilishini sezilarli darajada yaxshilashi mumkin bo'lgan kuchli vositadir. Ushbu chuqur o'rganishda bayon etilgan asosiy tushunchalarni tushunib va eng yaxshi amaliyotlarga rioya qilib, siz global auditoriya uchun yanada qo'llab-quvvatlanadigan va kengaytiriladigan ilovalar yaratish uchun Composition API dan foydalanishingiz mumkin. Composition API ni qabul qiling va Vue.js 3 ning to'liq salohiyatini oching.

Sizni o'z loyihalaringizda Composition API bilan tajriba o'tkazishga va u taqdim etadigan keng imkoniyatlarni o'rganishga undaymiz. Dasturlashdan zavqlaning!