Composition API nima?

Savol

Composition API nima va u Options API'dan nimasi bilan farq qiladi?

Qisqa javob

Composition API — komponent logikasini opsiya turi bo'yicha emas, fiche bo'yicha tashkil qilish va uni composables orqali komponentlar orasida osongina qayta ishlatish imkonini beruvchi funksiyalar to'plami (ref, reactive, computed, watch, lifecycle hook'lar).

Batafsil javob

Options API'da bitta fiche logikasi (masalan, hisoblagich bilan ishlash) data, computed, methods, watch bo'ylab tarqalgan bo'ladi. Katta komponentlarda bu o'qishni qiyinlashtiradi.

Composition API (odatda <script setup> orqali) fiche logikasining barchasini bitta joyga to'playdi:

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

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

Asosiy afzalligi — Options API mikslarida (mixin) yashirin nom to'qnashuvidan aziyat chekkan holatlardan farqli o'laroq, composables orqali qayta ishlatish (oddiy useXxx() funksiyalari).

<script setup> — sintaktik shakar: e'lon qilingan barcha o'zgaruvchilar va funksiyalar oddiy setup()dagi kabi return qilmasdan avtomatik ravishda shablonda mavjud bo'ladi.

Misol

// composables/useCounter.ts
export function useCounter(initial = 0) {
  const count = ref(initial)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
}

<script setup>
const { count, increment } = useCounter(10)
</script>

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

Qo'shimcha savollar

• Composable mikstindan (mixin) nimasi bilan farq qiladi?
• Bitta komponentda Options API va Composition API'ni birga ishlatish mumkinmi?
• <script setup> ichida this bilan nima bo'ladi?