Vue Js Options Api vs Composition Api

Emre Güzel
2 min readJul 4, 2022

--

Herkese merhaba arkadaşlar bugün sizlere Options API ve Composition API arasındaki farklardan ve hangisinin kullanılması gerektiğinden bahsedeceğim, şimdiden destekleriniz için çok teşekkür ederim iyi okumalar 🙂

Vue 2'den Vue 3'e geçiş yaparken veya yeni bir Vue 3 projesi başlatırken, birçok kişi, Options API’sini kullanmaya devam edip etmemeleri veya Composition API’sine tam olarak girmeleri gerektiğini merak ediyor.

Öncelikle ufak bir örnek vericek olursak syntax olarak Options API ve Composition API arasındaki fark aşağıda verilmiştir.

Options API

Bunun yerine Composition API ile aynı kodu yazmak isteseydik, şöyle görünürdü.

Composition API

Bu iki kod’a baktığımızda bir kaç farklılık keşfediceksiniz;

- Bunlardan ilki Composition API’de ref() öğesini kullandık.

- 2. olarak ise Options API’de methods, data kısmı ayrı bir obje içinde yazılmasına rağmen Composition API’de setup içerisinde aynı yerde yazılmıştır.

Composition API’nin avantajları nelerdir ?

Öncelikle Composition API Options API’ye göre daha az yer kaplar. Aslında küçük projelerde fark çok azdır ama projemiz büyüdüğünde bu farkta büyüyerek çoğalır.

Composition API’nin diğer avantajları nelerdir ?

Composition API ile gelen Composables’lar ile birlikte Mixins’lerde yaşanan isim çakışmasını önledi.

Belirtildiği gibi, Composition API daha az kod gerektirir.

Composition API’si, Options API’sinden daha mı iyi?

Aslında bu sorunun basit bir cevabı yok, Her iki yöntemin de kendine göre avantajları vardır ve belirli durumlarda faydalı olabilirler. Hangi yöntemi kullanırsanız kullanın, tamamdır, ancak Composition API, Options API’sinin beraberinde getirdiği bazı sorunları çözer.

Her iki API’yi birlikte kullanabilir miyim?

Elbette iki api’yi birlikte kullanabiliriz. Kısaca şu şekilde bir örnek gösterebiliriz.

Örneğin yukarıdaki kodda görüldüğü üzere setup içerisinde Composables’lar kullanılarak metaData import edilmiş head’in içinde ise Options API’nin gibi bu metaData’ya ulaşabildik.

Okuduğunuz için çok teşekkür ederim, elbette yanlışlarım ve eksiklerim olabilir, bu konuda bana geri dönüş sağlarsanız yanlışlarımı ve eksiklerimi düzeltebilirim sağlıcakla kalın ve yazımı beğenmeyi unutmayınnnn :)

--

--