Blog

Vue.js Composition API, Vue.js 3.0'da tanıtılan vegeliş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. Fonksiyonel Bileşenler (Functional Components): Composition API, fonksiyonel bileşenlerin kullanımını 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:

  

      

          vue
      
      

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