Vue.js: Reaktif Arayüzler İçin JavaScript Çerçevesi
Vue.js, kullanıcı arayüzü ve tek sayfa uygulamalar geliştirmek için kullanılan açık kaynaklı JavaScript çerçevesidir. Temel kavramlarını öğrenin.
Vue.js nedir?
Vue.js, web kullanıcı arayüzleri ve tek sayfa uygulamalar (SPA) geliştirmek için kullanılan, açık kaynaklı bir JavaScript çerçevesidir. Arayüzü küçük, yeniden kullanılabilir bileşenlere bölme fikrine dayanır ve veri değiştiğinde ekranın ilgili kısmını kendiliğinden günceller. Çerçeve, mevcut bir sayfaya adım adım eklenebilecek kadar esnektir; aynı zamanda büyük uygulamaları yönetecek yönlendirme ve durum yönetimi araçlarıyla genişletilebilir.
Vue, HTML, CSS ve JavaScript bilgisi olan geliştiricilerin hızlı öğrenebildiği, okunabilir bir şablon sözdizimiyle tanınır.
Nasıl çalışır? Temel kavramlar
Vue'nun işleyişi birkaç temel kavram üzerine kuruludur:
- Bileşen: Kendi şablonu, mantığı ve stiliyle tanımlanan arayüz parçasıdır. Düğme, form ya da tüm bir sayfa bileşen olabilir; bileşenler iç içe kullanılarak uygulama oluşturulur.
- Reaktivite: Bir veri değiştiğinde, o veriye bağlı ekran parçaları otomatik yenilenir. Geliştirici DOM'u elle güncellemez.
- Şablon sözdizimi: HTML'e benzeyen şablonlarda veri bağlama, koşul ve döngü yönergeleri kullanılır.
- Olaylar ve props: Üst bileşen alt bileşene veri gönderir (props), alt bileşen olay yayarak üstü haberdar eder.
- Yönlendirme ve durum yönetimi: Sayfalar arası geçiş için yönlendirici, ortak veriyi paylaşmak için merkezi bir durum deposu kullanılır.
Composition API nedir?
Vue 3 ile birlikte gelen Composition API, bileşen mantığını seçeneklere bölünmüş bir nesne yerine, işlevler halinde yazmaya imkân verir. İlgili mantık tek yerde toplanır ve farklı bileşenler arasında paylaşılabilir hale gelir. Bu paylaşılan işlevlere kompozisyon fonksiyonları (composables) denir.
Örneğin bir form doğrulama mantığı ya da bir listeyi sunucudan çekip filtreleme mantığı, kompozisyon fonksiyonu olarak yazılır ve birden fazla bileşende yeniden kullanılır. Büyük bileşenlerde mantığı konuya göre gruplamak, Composition API'nin okunabilirlik açısından sağladığı başlıca kazançtır. Eski Options API ise küçük ve orta bileşenlerde hâlâ geçerli bir seçenektir.
Küçük bir örnek
Örneğin bir e-ticaret yönetim panelinde ürün listesi, arama kutusu ve sepet özeti bileşenlerden oluşur. Kullanıcı arama kutusuna yazdıkça liste kendiliğinden süzülür; çünkü arama metni reaktif bir veri olarak tanımlanmıştır ve liste bu veriye bağlıdır. Sayfa yeniden yüklenmez, geliştirici de listeyi elle yeniden çizmek için ek kod yazmaz.
Aynı panelde filtreleme mantığı bir kompozisyon fonksiyonuna taşınırsa, sipariş listesi ve müşteri listesi de aynı mantığı yeniden yazmadan kullanır. Bu, hem tekrarı azaltır hem de hatanın tek yerde düzeltilmesini sağlar.
Nerede kullanılır, hangi araçlarla birlikte?
Vue; yönetim panelleri, kurumsal web uygulamaları, veri görselleştirme arayüzleri ve etkileşimli ürün sayfaları gibi alanlarda kullanılır. Küçük bir etkileşimi mevcut bir sayfaya katmak için de, tam kapsamlı bir uygulama çatısı olarak da tercih edilebilir.
Ekosistemde yönlendirme için Vue Router, durum yönetimi için Pinia, derleme ve geliştirme sunucusu için Vite sık anılır. Sunucu tarafı render ve arama motoru dostu sayfalar gerektiğinde Vue tabanlı üst katman çerçeveleri kullanılır. Test tarafında bileşen testleri için ayrı kütüphaneler bulunur.
Diğer çerçevelerle farkı ve sık hatalar
Vue, React ve Angular ile aynı problemi çözer: dinamik arayüz geliştirmek. Vue'nun öne çıkan yanı, öğrenme eğrisinin yumuşak olması ve şablon sözdiziminin HTML'e yakınlığıdır; React JSX ile JavaScript içinde şablon yazmayı tercih eder, Angular ise daha kapsamlı ve kurallı bir çatı sunar. Seçim, ekibin deneyimine, proje büyüklüğüne ve ekosistem ihtiyacına bağlıdır.
Sık hatalar:
- Reaktif veriyi doğrudan değiştirmek yerine kopyasını yeniden atamak ve reaktivitin kaybolmasına yol açmak.
- Bileşenleri gereğinden büyük tutmak; tek bileşen her şeyi yapmaya çalışınca bakım zorlaşır.
- Ortak veriyi bileşenler arasında karmaşık şekilde taşımak; merkezi durum yönetimi gerektiğinde geç kalmak.
- Performansı ölçmeden erken optimizasyon yapmak.
Mindset programlarında nerede çalışılır?
Vue.js 3 ve Composition API ile Uygulama Geliştirme programının müfredatında şu başlıklar yer alır: • Reaktivite Sistemi ve Temeller • Bileşen Tasarımı ve İletişim • Kompozisyon Fonksiyonları ve Mantık Paylaşımı • Durum Yönetimi ve Yönlendirme • Formlar, Doğrulama ve Kullanıcı Deneyimi • Performans, Test ve Dağıtım
İlgili Mindset programı
Vue.js 3 ve Composition API ile Uygulama Geliştirme
Sık sorulan sorular
Vue.js bir kütüphane mi, çerçeve mi?
Vue kendini ilerici bir çerçeve olarak tanımlar. Çekirdeği yalnızca arayüz katmanına odaklanır ve tek başına kullanılabilir. İhtiyaç arttıkça yönlendirme ve durum yönetimi gibi resmî tamamlayıcılarla genişletilir. Bu yüzden hem kütüphane gibi hem tam çerçeve gibi kullanılabilir. Bu esneklik, tek bir sayfaya eklenen küçük bir etkileşimden tam bir uygulamaya kadar aynı çerçevenin kullanılmasına imkân tanır.
Vue öğrenmek için önce neyi bilmek gerekir?
HTML, CSS ve temel JavaScript yeterli bir başlangıçtır. Modern JavaScript özellikleri (fonksiyonlar, modüller, dizi ve nesne işlemleri) ve temel DOM kavramları işi kolaylaştırır. React ya da Angular bilmek zorunlu değildir; Vue bağımsız olarak öğrenilebilir. Küçük bir bileşen yazıp veri değiştikçe ekranın nasıl güncellendiğini gözlemlemek, reaktivite kavramını oturtmanın pratik bir yoludur.
Vue ile arama motoru dostu site yapılabilir mi?
Evet. Yalnızca tarayıcıda çalışan tek sayfa uygulamalar arama motorları için sınırlama getirebilir. Sunucu tarafı render ya da önceden statik sayfa üretimi gibi yaklaşımlar kullanıldığında içerik arama motoruna hazır olarak sunulur. Bunun için Vue tabanlı üst katman çerçeveleri tercih edilir. Arama motoru görünürlüğü gereken genel içerik siteleri için bu karar proje başında verilmeli, sonradan eklemek mimariyi değiştirebilir.
Options API ile Composition API arasında hangisi seçilmeli?
İkisi de Vue 3'te desteklenir. Küçük ve basit bileşenlerde Options API yeterlidir. Mantığın büyüdüğü, birden fazla bileşende paylaşılması gereken durumlarda ve TypeScript ile çalışırken Composition API daha düzenli bir yapı sunar. Aynı projede ikisi birlikte kullanılabilir. Bir bileşende ilk başta Options API ile başlayıp sonra Composition API'ye geçmek de mümkündür, geçiş kademeli yapılabilir.