Vue.js ile bir şeyler geliştirirken, ister istemez karşımıza iki temel yapı çıkıyor: Composition API ve Options API. Hani böyle ilk başlarda neyin ne olduğunu tam anlamadan ilerlersin ya, işte ben de öyleydim bir zamanlar. Hatta kendi yazdığım bir projede, sanki her şey yolunda gidiyor gibiydi, komponentlerim sapasağlam çalışıyordu. Ama sonra bir baktım ki kodlar birbirine girmiş, neyin nerede olduğu belli değil. İşte o an anladım ki, sadece ‘çalışıyor’ olması yetmiyormuş. Vue’nun bu iki farklı yaklaşımı da tam olarak bu noktada devreye giriyor.
Composition API denilen şey, aslında Vue’nun daha yeni ve bence daha ‘modern’ diyebileceğimiz bir yaklaşımı. Düşünsenize, elinizde bir sürü özellik var, bir sürü veri var, bir sürü metod var. Bunları bir araya getirip bir ‘kompozisyon’ oluşturuyorsunuz. Tıpkı bir yemek yaparken bütün malzemeleri bir kapta karıştırmak gibi ama daha düzenli bir şekilde tabii. Her şeyin bir yeri var, her şeyin bir amacı var.
Options API ise daha eski ve belki de daha tanıdık gelen bir yöntem. Burada her şey belirli başlıklara ayrılmış durumda. Data’lar ayrı, Methods’lar ayrı, Computed’lar ayrı… Hani böyle bir dolap düşünün, her rafın bir kullanım amacı var. Bu da güzel, anlaşılır ama kod büyüdükçe, özellikle de birden fazla sorumluluğu olan komponentlerde, bu raflar arasındaki geçişler biraz kafa karıştırıcı olabiliyor.
Peki, neden Composition API’ye geçmeliyiz veya neden onu kullanmalıyız? Aslında temel sebep, kodun daha okunabilir, daha anlaşılır ve daha yeniden kullanılabilir olması. Düşünün ki bir login formu yapıyorsunuz. Bu formun hem kullanıcı adı ve şifre veri alanları var, hem bir ‘giriş yap’ butonu var, hem de belki bir ‘şifremi unuttum’ linki var. Options API’de bu farklı mantıkları farklı yerlere dağıtmanız gerekebilir. Composition API ile ise, bu login mantığını tek bir yerde toplayabiliyorsunuz.
Bu sayede ne oluyor biliyor musunuz? Kodunuzu başka bir komponentte kullanmak istediğinizde, sadece o ‘login’ fonksiyonunu alıp başka yere taşıyabiliyorsunuz. Tıpkı bir Lego parçasını alıp başka bir yapıda kullanmak gibi. İşte bu yeniden kullanılabilirlik olayı var ya, bana göre geliştirme hızını inanılmaz artırıyor.
Şimdi gelelim işin pratiğine. Composition API’de ‘setup’ adında özel bir fonksiyonumuz var. Bu fonksiyon, komponentin oluşturulmasından önce çalışıyor ve sizin kullanacağınız tüm reaktif verileri, metotları ve computed’ları buradan döndürüyorsunuz. Yani, bir nevi bu komponentin ‘yapı taşları’nı burada tanımlayıp dışarıya açıyorsunuz.
Bu arada, Composition API ile birlikte ‘ref’ ve ‘reactive’ gibi yeni yardımcı fonksiyonlar da geliyor. ‘Ref’, tek bir değeri reaktif hale getirmek için kullanılıyor, yani değeri değiştiğinde Vue bunu anında fark ediyor. ‘Reactive’ ise daha karmaşık objeler için kullanılıyor. Tıpkı benim eski projelerimde yaşadığım o ‘kodlar birbirine girmiş’ durumu yaşanmaması için birebir.
Hani böyle bir şey yapmak istediğinizde, önce bir araştırırsınız ya, ben de Composition API hakkında biraz araştırma yaptım. Google’da arattığımda bir sürü yazı çıktı karşıma. Çoğu yerde de ‘daha iyi’, ‘daha esnek’ gibi şeyler yazıyordu. Açıkçası ilk başta biraz karmaşık geldi ama denemeye başlayınca olayın mantığı oturdu galiba.
Bir örnekle açıklayalım mı? Diyelim ki bir sayaç yapmak istiyoruz. Options API’de bu şöyle görünür:
// Options API Örneği – Basit Sayaç
export default { data() { return { count: 0 } }, methods: { increment() { this.count++; } } }Gayet anlaşılır, değil mi? Data’da ‘count’ değişkenimiz var, methods’ta da ‘increment’ fonksiyonumuz. Basit.
Peki, bunu Composition API ile nasıl yaparız? İşte burası biraz daha farklı ama bence daha ‘düzenli’:
// Composition API Örneği – Basit Sayaç
import { ref } from 'vue';export default { setup() { const count = ref(0);
function increment() { count.value++; }
return { count, increment }; } }
Burada ne yaptık? Önce ‘ref’ fonksiyonunu import ettik. Sonra ‘setup’ içinde ‘count’ adında bir reaktif değişken oluşturduk ve başlangıç değerini 0 verdik. Ardından ‘increment’ fonksiyonunu yazdık. Dikkat ederseniz ‘count.value++’ şeklinde kullanıyoruz, çünkü ref ile oluşturulan değerlere ‘.value’ ile erişiyoruz. Son olarak da bu ‘count’ ve ‘increment’i dışarıya döndürüyoruz ki template’te kullanabilelim.
Şimdi, bu iki örneğe baktığınızda, ilkinde ‘this.count’ gibi bir kullanım varken, ikincisinde doğrudan ‘count’ veya ‘count.value’ ile erişim var. Composition API’de ‘this’ kavramı biraz daha farklı işliyor, hatta çoğu zaman ‘this’ kullanma ihtiyacınız kalmıyor, bu da kafanın karışmasını engelliyor.
Neticede, Composition API, daha karmaşık durumlar için inanılmaz esnek bir yapı sunuyor. Yani, bir komponentin içinde birden fazla mantığı yönetmeniz gerektiğinde, Composition API ile bu mantıkları küçük, yeniden kullanılabilir fonksiyonlara ayırıp ‘setup’ içinde bir araya getirebiliyorsunuz. Bu da kodunuzu daha modüler ve daha test edilebilir hale getiriyor. Bence bu, özellikle büyük projelerde zaman kazandıran en önemli özelliklerden biri.
Tabi, her yeni teknoloji gibi başlangıçta biraz öğrenme eğrisi olabilir. Ama bir kere mantığını kaptığınızda, Options API’ye göre Composition API’nin ne kadar güçlü olduğunu görüyorsunuz. Özellikle de kodunuzu başka yerlerde de kullanmak istiyorsanız, ya da bir ekip içinde çalışıyorsanız, bu standartlaşmış yapı sayesinde herkesin kodu daha rahat anlamasını sağlıyorsunuz.
Bu arada, Composition API’yi kullanırken Vue Router veya Pinia gibi kütüphanelerle entegrasyonu da oldukça sorunsuz. Hani böyle ‘acaba uyumlu mu?’ diye düşünmenize gerek kalmıyor. Hepsi birbirini tamamlayan parçalar gibi çalışıyor. YouTube’da da bolca tutorial bulabilirsiniz, oradan da takviye alabilirsiniz.
Sonuç olarak, eğer Vue.js ile projeler geliştiriyorsanız ve kodunuzun daha yönetilebilir, daha esnek ve daha anlaşılır olmasını istiyorsanız, Composition API’yi mutlaka denemenizi tavsiye ederim. Başlangıçta biraz farklı gelse de, uzun vadede size kazandıracağı şeylerin başında ‘temiz kod’ geliyor. İşte bu kadar! Ne güzel değil mi?