Vue 3 Composition API: замонавий компонент ёзиш санъати

Vue 3 чиқиши билан фреймворк дастурчиларга компонент ёзишнинг бутунлай янги усулини таклиф қилди. Бу усул Composition API деб аталади ва у Options API'нинг кўплаб чекловларини бартараф этади. Агар сиз Vue 2 ёки Options API билан ишлаган бўлсангиз, дастлаб бу янги ёндашув бироз ғалати туюлиши мумкин, аммо бир неча компонент ёзганингиздан кейин унинг афзалликларини дарҳол сезасиз. Ушбу мақолада Composition API нималигини, у қандай муаммоларни ҳал қилишини ва замонавий компонентни қандай ёзишни амалий код мисоллари билан кўриб чиқамиз.

Options API ва Composition API ўртасидаги фарқ

Options API'да компонент мантиғи бир нечта алоҳида бўлимларга бўлинади: data, methods, computed, watch ва ҳоказо. Бу ёндашув кичик компонентлар учун жуда қулай, чунки ҳар бир нарса ўз жойида туради. Аммо компонент катталашган сари битта мантиқий хусусият (масалан, фойдаланувчи қидируви) бир нечта бўлимларга тарқалиб кетади — маълумот dataда, функциялар methodsда, кузатувчилар watchда бўлади. Натижада боғлиқ кодларни топиш ва уларни бошқариш қийинлашади.

Composition API эса мантиқни хусусият бўйича гуруҳлаш имконини беради. Битта функция (масалан, қидирув) билан боғлиқ барча ўзгарувчилар, ҳисобланадиган қийматлар ва кузатувчилар битта жойда, ёнма-ён туради. Бу кодни ўқишни осонлаштиради ва катта компонентларни бошқаришни сезиларли даражада қулайлаштиради. Бундан ташқари, бу мантиқни алоҳида файлларга ажратиб, бошқа компонентларда қайта ишлатиш имконини беради.

<script setup> синтаксиси

Vue 3'да компонент ёзишнинг энг замонавий ва қисқа усули — бу <script setup> синтаксисидир. У ортиқча бойлерплейт кодни йўқ қилади: сиз энди setup() функциясини ёзишингиз, қийматларни return қилишингиз ёки компонентларни қўлда рўйхатдан ўтказишингиз шарт эмас. Топ даражада эълон қилинган барча ўзгарувчилар ва функциялар автоматик равишда шаблонда мавжуд бўлади.

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

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

<template>
  <button @click="increment">Босилди: {{ count }}</button>
</template>

Реактивлик: ref, reactive, computed ва watch

Composition API'да реактив ҳолатни яратиш учун иккита асосий функция мавжуд. ref() оддий қийматлар (сон, сатр, мантиқий) учун ишлатилади ва қийматга .value орқали мурожаат қилинади, шаблонда эса автоматик очилади. reactive() эса объектлар учун мўлжалланган ва у объектнинг барча хусусиятларини реактив қилади. Амалиётда кўпчилик дастурчилар соддалиги учун кўпроқ ref дан фойдаланади.

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

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

// computed — бошқа қийматларга боғлиқ ҳосила қиймат
const doubled = computed(() => count.value * 2)

// watch — ўзгаришни кузатиш
watch(count, (yangi, eski) => {
  console.log(`Qiymat ${eski} dan ${yangi} ga o'zgardi`)
})

computed() бошқа реактив қийматларга асосланган ҳосила қийматни яратади ва у фақат боғлиқ қийматлар ўзгарганда қайта ҳисобланади, бу эса унумдорликни оширади. watch() эса бирор қиймат ўзгарганда ён таъсир (масалан, API сўрови ёки консолга ёзиш) бажариш керак бўлганда ишлатилади. Бу тўрт функция Composition API'даги реактивликнинг асосини ташкил этади.

Composable функциялар билан мантиқни қайта ишлатиш

Composition API'нинг энг кучли жиҳати — бу composable функциялардир. Composable бу реактив ҳолат ва мантиқни ўз ичига олган, одатда use префикси билан номланадиган оддий функциядир. Сиз унга мантиқни жойлаштириб, кейин уни исталган компонентда чақириб ишлатишингиз мумкин. Бу Vue 2'даги миксинлар муаммосини ҳал қилади ва кодни тоза, қайта ишлатиладиган қилади.

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

// Компонентда:
const { count, increment, reset } = useCounter(10)

Қачон қайси бирини танлаш керак

Composition API ҳар доим ҳам ягона тўғри танлов эмас. Кичик, оддий компонентлар учун Options API ҳали ҳам жуда қулай ва ўқиш осон бўлиши мумкин, айниқса жамоангизда Vue 2 тажрибасига эга дастурчилар кўп бўлса. Composition API эса мураккаб мантиққа эга катта компонентларда, мантиқни қайта ишлатиш зарур бўлганда ва TypeScript билан кучли типлаштириш керак бўлганда ўзини энг яхши кўрсатади. Энг муҳими шундаки, иккала API'ни бир лойиҳада бирга ишлатиш мумкин, шунинг учун сиз аста-секин ўтишингиз мумкин.

Хулоса қиладиган бўлсак, Composition API Vue экотизимидаги муҳим қадам бўлиб, у катта лойиҳаларни бошқаришни ва кодни қайта ишлатишни сезиларли даражада осонлаштиради. <script setup> синтаксиси ва composable функциялар билан сиз тозароқ, модулли ва қўллаб-қувватлаш осон компонентлар яратасиз. Агар сиз янги лойиҳа бошлаётган бўлсангиз, Composition API'ни стандарт танлов сифатида кўриб чиқишингизни тавсия қиламиз.