Vue.js Mülakat Soruları: Rehber

1 Vue 2 ile Vue 3 Reactivity Sistemi Arasındaki Fark Nedir?

En temel fark, kullanılan JavaScript teknolojisidir. Vue 2, Object.defineProperty (Getters/Setters) kullanırken, Vue 3 modern tarayıcılarda bulunan Proxy API'sini kullanır.

Vue 3'teki Proxy tabanlı sistem ise nesnenin kendisine bir "vekil" atar. Bu sayede:

• Dinamik olarak eklenen property'ler otomatik olarak reaktiftir.
• Array manipülasyonları sorunsuz çalışır.
• Lazy Reactivity: İç içe nesneler sadece erişildiğinde reaktif hale getirilir, bu da büyük performans artışı sağlar.

2 Composition API vs Options API: Neden Tercih Edilmeli?

Options API (data, methods, mounted) küçük ve orta ölçekli projeler için harikadır ve öğrenmesi kolaydır. Ancak proje büyüdükçe şu sorunlar ortaya çıkar:

• Kod Dağınıklığı: Bir özellikle (feature) ilgili kodlar dosyanın her yerine dağılır.
• Mantık Paylaşımı Zorluğu: Mixins kullanımı "naming collision" ve veri kaynağı belirsizliği yaratır.
• TypeScript Desteği: this bağlamı nedeniyle TS entegrasyonu zordur.

Composition API'nin Avantajları:

        // useUserFeature.ts (Composable)
export function useUserFeature() {
  const user = ref(null)
  const fetchUser = async () => { /* ... */ }
  
  onMounted(fetchUser)
  
  return { user, fetchUser }
}

// Component içinde sadece import edip kullanırsınız.
// Mantık UI'dan tamamen ayrılmış olur.
      

Bir geliştirici olarak, Composable yapısı sayesinde iş mantığını (business logic) tekrar kullanılabilir, test edilebilir ve modüler hale getirebildiğimiz için Composition API'yi tercih ederim.

3 Vue Yaşam Döngüsü (Lifecycle) Sıralaması Nasıldır?

Bir Vue bileşeni oluşturulurken şu aşamalardan geçer:

1. Creation (Oluşturma): beforeCreate -> created (Options API) / setup() (Composition API). Veri gözlemi ve olaylar başlatılır. DOM henüz yoktur.
2. Mounting (Montaj): beforeMount -> mounted. Şablon derlenir ve DOM'a yerleştirilir. API istekleri genellikle burada yapılır.
3. Updating (Güncelleme): beforeUpdate -> updated. Reaktif veri değiştiğinde tetiklenir.
4. Unmounting (Yok Etme): beforeUnmount -> unmounted. Bileşen DOM'dan silinmeden hemen önce ve sonra. Event listener'ları temizlemek için idealdir.

4 Computed vs Watch: Hangisi Ne Zaman Kullanılır?

5 Büyük Ölçekli Uygulama Mimarisi Nasıl Kurulur?

Büyük bir Vue projesinde sürdürülebilirlik için şu prensipleri uygularım:

• Modüler Yapı (Domain Driven Design): Dosyaları teknolojiye göre (components, views) değil, özelliğe göre (modules/auth, modules/cart) klasörlerim.
• Composables: İş mantığını UI'dan ayırarak composables klasöründe toplarım.
• Global State Yönetimi (Pinia): State'i modüler store'lara bölerim.
• Base Components: Buton, Input gibi temel UI elemanlarını BaseButton.vue gibi global bileşenler haline getiririm.
• Layout Sistemi: Farklı sayfa yapıları (Admin, User, Auth) için Nuxt veya Vue Router layout sistemini kullanırım.

6 Vue Performansını Artırmak İçin Neler Yaparsın?

• Code Splitting / Lazy Loading: Rotaları ve ağır bileşenleri (defineAsyncComponent) sadece ihtiyaç duyulduğunda yüklerim.
• v-show vs v-if: Sık değişen (toggle) elementler için v-show (CSS display:none), nadir değişenler için v-if kullanırım.
• v-for Key: Listelerde her zaman unique (benzersiz) bir :key kullanırım (index kullanmaktan kaçınırım).
• KeepAlive: Sekmeler arası geçişte bileşen durumunu korumak ve tekrar render etmemek için <KeepAlive> kullanırım.
• Virtual Scrolling: Binlerce satırlık listeler için sadece görünen kısmı render eden kütüphaneler (vue-virtual-scroller) kullanırım.

7 Virtual DOM Nasıl Çalışır?

Virtual DOM, gerçek DOM'un bellekteki hafif bir kopyasıdır (JavaScript nesnesi).

1. Veri değiştiğinde, Vue yeni bir Virtual DOM ağacı oluşturur.
2. Eski ağaç ile yeni ağaç karşılaştırılır (Diffing Algorithm).
3. Sadece değişen kısımlar (farklar) hesaplanır.
4. Bu farklar gerçek DOM'a uygulanır (Patching).

Bu yöntem, maliyetli olan "doğrudan DOM manipülasyonu" sayısını minimize ederek performansı artırır.

8 Component Communication Yöntemleri Nelerdir?

• Props (Parent -> Child): Veri aktarımı için.
• Emits (Child -> Parent): Olay bildirimi için.
• Provide / Inject (Ancestor -> Descendant): Prop drilling (veriyi torunun torununa taşımak) sorununu çözmek için. Aile ağacında veri paylaşımı sağlar.
• Global State (Pinia/Vuex): Uygulamanın herhangi bir yerinden erişilmesi gereken veriler (Kullanıcı oturumu, sepet) için.
• Refs / Template Refs: Parent'ın Child metodunu doğrudan çağırması gerektiğinde (nadiren kullanılmalı).

9 Vuex'te Mutation ile Action Arasındaki Fark Nedir?

Bu ayrım Vuex'e özgüdür (Pinia'da kaldırılmıştır, her şey Action'dır).

• Mutation: State'i değiştiren tek yerdir. Tamamen senkron (eşzamanlı) çalışmak zorundadır. Devtools takibi için bu şarttır.
• Action: İş mantığını içerir, asenkron olabilir (API isteği). State'i doğrudan değiştirmez, bir Mutation'ı commit eder.

10 Route-Level Code Splitting Nasıl Uygulanır?

Uygulamanın açılış hızını artırmak için, kullanıcının o an görmediği sayfaların JavaScript kodlarını yüklememek gerekir. Vue Router'da bu işlem dinamik import ile yapılır:

        const routes = [
  {
    path: '/',
    component: Home // Statik import (Bundle'a dahil)
  },
  {
    path: '/dashboard',
    // Dinamik import (Ayrı bir chunk dosyası oluşturur)
    // Sadece kullanıcı bu rotaya girdiğinde yüklenir.
    component: () => import('./views/Dashboard.vue')
  }
]
      

Webpack veya Vite, bu sözdizimini gördüğünde otomatik olarak o bileşeni ayrı bir JS dosyasına (chunk) böler.