Vue3 ve Vue2 — Vuejs Artık Eskisi Gibi Değil — Composition API

Furkan Şahin
2 min readJan 1, 2022

Herkese selamlar öncelikle…
Ben kendi gördüklerimi paylaşmaya çalışacağım, bilgi değil deneyim aktarma yanlısıyım ✌️

Vue3'ün perf. analitiklerine bakınca ciddi bir fark olduğu aşikar, ve Evan You bizlere SFC ve Composition API’yi öneriyor. Bununla birlikte module-bundler olarak vite’ı öneriyor. Baktığınız zaman hepsi tek bir elden çıkmış. O yüzden ekosistem uyumluluğu var.

Eski Vue paketlerini artık unutun 🥲

Kullanmayı düşündüğünüz vue2 paketleri varsa bunlar vue3te çalışmıyor işin kötü yanı bu. Tüm paketler vue3'e göre yeniden yazılması gerekiyor. Bu dezavantajı göz önünude bulundurarak uygun dependency’lerinizi önceden belirleyip, yola öyle çıkmalısınız.

Composition API ve Options API

Burada seçim tamamen size kalmış. Siz daha çok alışkanlıklarımızı terketmeyelim “ne güzel methods ayrı, data ayrı kodluyorduk” diyorsanız Options API’den devam edebilirsiniz. Composition API size ne katacak?
Aslında kısaca örneklere bakarsanız, bu yapı size temelde vanillia js ile functional-programming hissiyatı verecek. Temelde Vue’nün kalıpları içinde kalmanıza gerek kalmayacak. Dolayısıyla Vue bilmeyen takım arkadaşlarınız varsa aslında Composition API kullanmanız, onların entegrasyonunu kolaylaştıracaktır.

SFC CompositionApi Örneği

Composition API’nin hayatımızdan götürdükleri

Artık mixins’ler hayatınızda yok. Bunun yerine Composition API Plugin’lerini yazmanız gerekecek ve artık global prototype’larınıza this.$axios yazarak erişemiyorsunuz maalesef.

Bana göre bu kötü ama dert değil, vsCode gibi bir editor ile ve iyi bir pluginSet(Vetur vs.) ile bunlar sorun haline gelmiyor.

axios’u global olarak tüm app’e provide ediyoruz

axios gibi global plugin’lere erişmek için yapmanız gereken app’i create ederken vue-globalApi-provide ile install etmeniz.

Bir global plugin çağırma örneği
Bir global plugin çağırma örneği Vue-SFC-CompositionApi

Son olarak…

Vuex, Vue-Router gibi vue’nin temel ayakları diyeceğimiz paketler vue3'e göre yeniden yazıldı onları kurarken sürümlerine dikkat etmelisiniz ✌️ Görüşmek üzere 👋

Vue3'e özel yeniden design edilen dökümantasyon sitesi

Vue3 Boilerplate ⚡ ️

--

--