Vue.js Nedir? Yeni Başlayanlar İçin Rehber
Sayfayı kopyala
💡 Özet (TL;DR):
- Vue.js Nedir?: Kullanıcı arayüzleri ve tek sayfa uygulamalar (SPA) oluşturmak için kullanılan, öğrenmesi kolay, modüler ve yüksek performanslı bir açık kaynaklı JavaScript framework'üdür.
- Öne Çıkan Özellikleri: HTML tabanlı şablon yapısı, reaktif veri bağlama (reactivity) ve yeniden kullanılabilir bileşen (component) mimarisi.
- Güncel Durum: Vue 2 sürümü Aralık 2023 itibarıyla resmi desteğini kaybetmiştir (EOL). Yeni projelerde varsayılan olarak Vue 3, durum yönetimi için Pinia ve geliştirici dostu Composition API kullanılmaktadır.
2017 yılında "React mi öğrensem Vue mu?" sorusu ile her iki framework'ü de incelemiş ve sonuç olarak Vue.js'te karar kılmıştım. Bu yazıyı, o günden bugüne büyük bir keyifle kullandığım Vue ekosistemine "Merhaba" demek isteyenlere fikir vermek için kaleme alıyorum.
Popüler Frontend Framework'leri Karşılaştırması
| Özellik | React | Vue.js | Angular |
|---|---|---|---|
| Geliştirici | Meta (Facebook) | Evan You & Topluluk | |
| Öğrenme Eğrisi | Orta (JSX ve ekosistem seçimi) | Kolay (Standart HTML/CSS/JS) | Zor (TypeScript ve yoğun mimari) |
| Şablon Yapısı | JSX (JavaScript içinde HTML) | HTML tabanlı şablonlar | HTML tabanlı şablonlar |
| Durum Yönetimi | Redux, Context API, Zustand | Pinia (Modern), Vuex (Legacy) | NgRx, RxJS |
| Performans | Virtual DOM (Hızlı) | Virtual DOM / Compiler-informed (Çok Hızlı) | Real DOM / Change Detection (Hızlı) |
Vue.js Nedir?
Vue.js, eski bir Google çalışanı olan Evan You tarafından geliştirilen açık kaynak kodlu bir JavaScript framework'üdür.
Ağırlıklı olarak tarayıcı tabanlı tek-sayfa uygulamaları (Single Page Application - SPA) için kullanıcı arayüzü geliştirmeye yarayan Vue.js'i, mobil (Capacitor/NativeScript) veya masaüstü (Electron) uygulamalar için de kullanmak mümkündür.
Modüler yapısı sayesinde ana Vue bileşenini ihtiyacınız olan modül ve eklentilerle genişleterek çok basit bir tek sayfa uygulamayı da, karmaşık çok sayfalı kurumsal sistemleri de Vue ile kolayca kotarabilirsiniz.
Vue.js'in Güçlü Yönleri Nelerdir?
1. Dosya Boyutu ve Performans
Gzip'li haliyle oldukça küçük boyutlu olan (Vue 3 çekirdeği ~10 KB civarındadır) Vue, modüler yapısı sayesinde kullanmadığınız özellikleri projenize dahil etmenizi otomatik olarak önler. Ağır yükler altında bile sanal DOM (Virtual DOM) optimizasyonları sayesinde son derece hızlı çalışır.
2. Öğrenme Kolaylığı
Eğer temel düzeyde JavaScript, HTML ve CSS bilginiz varsa, Vue öğrenmeniz çok kısa sürecektir. Şablon sistemi olarak standart HTML kullandığı için React'teki JSX gibi sıfırdan yeni bir sözdizimi öğrenmek zorunda kalmazsınız.
3. Güçlü Dokümantasyon
Vue ekosisteminin en büyük avantajlarından biri, resmi web sitesindeki dokümantasyonun inanılmaz derecede anlaşılır, öğretici ve güncel olmasıdır. Başka hiçbir harici kaynağa ihtiyaç duymadan sadece resmi kılavuzları takip ederek Vue uzmanı olabilirsiniz.
4. Reaktivite (Reactivity)
Vue.js'in reaktif veri bağlama motoru, JavaScript tarafındaki verileriniz (değişkenler, diziler, nesneler) değiştiğinde HTML arayüzünün anında ve otomatik olarak güncellenmesini sağlar. Bu durum sizi manuel DOM manipülasyonu yapma yükünden tamamen kurtarır.
5. Bileşen (Component) Mimarisi
Vue ile tekrar tekrar kullanabileceğiniz arayüz bileşenleri oluşturmak çok kolaydır. Örneğin, özelleştirdiğiniz bir tasarım elemanını (form girdi alanı, buton veya açılır liste) bir bileşen haline getirip projenin her yerinde tek satırla çağırabilir, tüm bu bileşenlerin birbirleriyle güvenli şekilde etkileşim kurmasını sağlayabilirsiniz.
Vue 2 vs. Vue 3 ve Güncel Durum
Vue 3, Vue 2.x sürümlerine göre performans, paket boyutu ve geliştirici deneyimi açısından devasa iyileştirmelerle gelmiştir.
- End of Life (EOL) Uyarısı: Vue 2, 31 Aralık 2023 tarihi itibarıyla resmi ömrünü tamamlamıştır (EOL). Bu nedenle artık yeni projelerde Vue 2 kullanılması kesinlikle önerilmemekte; yeni başlayanların doğrudan Vue 3 ile başlaması gerekmektedir.
- Composition API ve
<script setup>: Vue 3 ile gelen en büyük yeniliklerden biri, React Hooks mantığına benzeyen fakat reaktiviteyi çok daha temiz yöneten Composition API'dır. Bu yapı, büyük ölçekli projelerde kodun organize edilmesini son derece kolaylaştırır. - Pinia ve Modern Ekosistem: Vue 2 döneminde popüler olan durum yöneticisi Vuex, yerini Vue 3 ile birlikte resmi olarak çok daha hafif, basit ve TypeScript desteği güçlü olan Pinia'ya bırakmıştır. Benzer şekilde router tarafında
vue-router'ın güncel Vue 3 sürümü kullanılmaktadır.
Vue 3 Hakkında Bilmeniz Gerekenler ve Yenilikler başlıklı yazımda Vue 3'ün teknik detaylarını daha ayrıntılı inceleyebilirsiniz. Sorularınız veya yorumlarınızla deneyimlerinizi paylaşmayı unutmayın.
Bu Yazıda Yapılan Değişiklikler
- 21.06.2026: Vue 2'nin 31 Aralık 2023 itibarıyla EOL (End of Life) olduğu bilgisi eklenerek yeni başlayanlara Vue 2 önerme hatası düzeltildi. Durum yöneticisi olarak Vuex yerine modern standart olan Pinia eklendi. Türkçe imla hataları (React'mi -> React mi, bende -> ben de vb.) ve dokümantasyon yazımları düzeltildi. Popüler framework karşılaştırma tablosu ile özet paneli eklendi.
- 11.05.2022: Yazı özeti düzenlendi.
