Composition API Nedir?

Vue.js Composition API, Vue.js 3.0'da tanıtılan ve geliştiricilere daha iyi bir organizasyon ve paylaşılabilirlik sağlayan bir API'dir. Vue 2.x'de, mantığı özellikler, yöntemler ve diğer öğeler arasında bölüştürmek için genellikle Options API kullanılıyordu. Composition API, bu konuda daha esnek, okunabilir ve düzenli bir alternatif sunar.

Composition API'nin başlıca özellikleri şunlardır:

1. Mantığın Fonksiyonlarla Düzenlenmesi: Composition API, bileşen mantığını yeniden kullanılabilir fonksiyonlara (composable) bölmeyi teşvik eder. Bu, bileşenin durum yönetimi ve işlevselliği gibi kısımlarını daha küçük ve daha anlamlı fonksiyonlara bölebileceğiniz anlamına gelir.
2. Vue'un Reaktif Sistemi: Composition API, Vue'un reaktif (reactive) sistemini kullanmaya dayanır. ref ve reactive gibi reaktif özelliklerle durum yönetimini kolaylaştırır.
3. Vue'un Yeni `setup` Fonksiyonu: Composition API, Vue 3 ile birlikte gelen yeni setup fonksiyonunu tanıtır. Bu fonksiyon, bileşenin kurulumu sırasında çalıştırılır ve bileşenin içindeki reaktif durumları, yöntemleri ve diğer öğeleri hazırlamanıza olanak tanır.

Örnek bir kullanım:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    //Reaktif durumu tanımla
    const count = ref(0);

    //İşlevselliği tanımla
    function increment() {
      count.value++;
    }

    //Dışa açılacak öğeleri döndür
    return {
      count,
      increment,
    };
  },
};
</script>

Bu örnekte, Composition API kullanılarak bir sayacın durumu ve arttırma işlevselliği yönetilmektedir. setup fonksiyonu, bileşenin başlatılması sırasında çalıştırılır ve gerekli reaktif durumları ve işlevselliği döndürerek bileşeni yapılandırır.