Vue 3 Composition API: zamonaviy komponent yozish san'ati

Vue 3 chiqishi bilan freymvork dasturchilarga komponent yozishning butunlay yangi usulini taklif qildi. Bu usul Composition API deb ataladi va u Options API'ning ko'plab cheklovlarini bartaraf etadi. Agar siz Vue 2 yoki Options API bilan ishlagan bo'lsangiz, dastlab bu yangi yondashuv biroz g'alati tuyulishi mumkin, ammo bir necha komponent yozganingizdan keyin uning afzalliklarini darhol sezasiz. Ushbu maqolada Composition API nimaligini, u qanday muammolarni hal qilishini va zamonaviy komponentni qanday yozishni amaliy kod misollari bilan ko'rib chiqamiz.

Options API va Composition API o'rtasidagi farq

Options API'da komponent mantig'i bir nechta alohida bo'limlarga bo'linadi: data, methods, computed, watch va hokazo. Bu yondashuv kichik komponentlar uchun juda qulay, chunki har bir narsa o'z joyida turadi. Ammo komponent kattalashgan sari bitta mantiqiy xususiyat (masalan, foydalanuvchi qidiruvi) bir nechta bo'limlarga tarqalib ketadi — ma'lumot datada, funksiyalar methodsda, kuzatuvchilar watchda bo'ladi. Natijada bog'liq kodlarni topish va ularni boshqarish qiyinlashadi.

Composition API esa mantiqni xususiyat bo'yicha guruhlash imkonini beradi. Bitta funksiya (masalan, qidiruv) bilan bog'liq barcha o'zgaruvchilar, hisoblanadigan qiymatlar va kuzatuvchilar bitta joyda, yonma-yon turadi. Bu kodni o'qishni osonlashtiradi va katta komponentlarni boshqarishni sezilarli darajada qulaylashtiradi. Bundan tashqari, bu mantiqni alohida fayllarga ajratib, boshqa komponentlarda qayta ishlatish imkonini beradi.

<script setup> sintaksisi

Vue 3'da komponent yozishning eng zamonaviy va qisqa usuli — bu <script setup> sintaksisidir. U ortiqcha boilerplate kodni yo'q qiladi: siz endi setup() funksiyasini yozishingiz, qiymatlarni return qilishingiz yoki komponentlarni qo'lda ro'yxatdan o'tkazishingiz shart emas. Top darajada e'lon qilingan barcha o'zgaruvchilar va funksiyalar avtomatik ravishda shablonda mavjud bo'ladi.

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Bosildi: {{ count }}</button>
</template>

Reaktivlik: ref, reactive, computed va watch

Composition API'da reaktiv holatni yaratish uchun ikkita asosiy funksiya mavjud. ref() oddiy qiymatlar (son, satr, mantiqiy) uchun ishlatiladi va qiymatga .value orqali murojaat qilinadi (shablonda esa avtomatik ochiladi). reactive() esa obyektlar uchun mo'ljallangan va u obyektning barcha xususiyatlarini reaktiv qiladi. Amaliyotda ko'pchilik dasturchilar soddaligi uchun ko'proq ref dan foydalanadi.

import { ref, reactive, computed, watch } from 'vue'

const count = ref(0)
const user = reactive({ name: 'Ali', age: 25 })

// computed — boshqa qiymatlarga bog'liq hosila qiymat
const doubled = computed(() => count.value * 2)

// watch — o'zgarishni kuzatish
watch(count, (yangi, eski) => {
  console.log(`Qiymat ${eski} dan ${yangi} ga o'zgardi`)
})

computed() boshqa reaktiv qiymatlarga asoslangan hosila qiymatni yaratadi va u faqat bog'liq qiymatlar o'zgarganda qayta hisoblanadi, bu esa unumdorlikni oshiradi. watch() esa biror qiymat o'zgarganda yon ta'sir (masalan, API so'rovi yoki konsolga yozish) bajarish kerak bo'lganda ishlatiladi. Bu to'rt funksiya Composition API'dagi reaktivlikning asosini tashkil etadi.

Composable funksiyalar bilan mantiqni qayta ishlatish

Composition API'ning eng kuchli jihati — bu composable funksiyalardir. Composable bu reaktiv holat va mantiqni o'z ichiga olgan, odatda use prefiksi bilan nomlanadigan oddiy funksiyadir. Siz unga mantiqni joylashtirib, keyin uni istalgan komponentda chaqirib ishlatishingiz mumkin. Bu Vue 2'dagi mixinlar muammosini hal qiladi va kodni toza, qayta ishlatiladigan qiladi.

// useCounter.js
import { ref } from 'vue'

export function useCounter(start = 0) {
  const count = ref(start)
  const increment = () => count.value++
  const reset = () => count.value = start
  return { count, increment, reset }
}

// Komponentda:
const { count, increment, reset } = useCounter(10)

Qachon qaysi birini tanlash kerak

Composition API har doim ham yagona to'g'ri tanlov emas. Kichik, oddiy komponentlar uchun Options API hali ham juda qulay va o'qish oson bo'lishi mumkin, ayniqsa jamoangizda Vue 2 tajribasiga ega dasturchilar ko'p bo'lsa. Composition API esa murakkab mantiqqa ega katta komponentlarda, mantiqni qayta ishlatish zarur bo'lganda va TypeScript bilan kuchli tiplashtirish kerak bo'lganda o'zini eng yaxshi ko'rsatadi. Eng muhimi shundaki, ikkala API'ni bir loyihada birga ishlatish mumkin, shuning uchun siz asta-sekin o'tishingiz mumkin.

Xulosa qilib aytadigan bo'lsak, Composition API Vue ekotizimidagi muhim qadam bo'lib, u katta loyihalarni boshqarishni va kodni qayta ishlatishni sezilarli darajada osonlashtiradi. <script setup> sintaksisi va composable funksiyalar bilan siz tozaroq, modulli va qo'llab-quvvatlash oson komponentlar yaratasiz. Agar siz yangi loyiha boshlayotgan bo'lsangiz, Composition API'ni standart tanlov sifatida ko'rib chiqishingizni tavsiya qilamiz.