Vue.js Interview Guide

# javascript

2025-04-04

Aşağıda, Vue.js ile ilgili mülakatlarda karşınıza çıkabilecek sorulara yönelik, kapsamlı, detaylandırılmış ve donanımlı bir rehber sunulmaktadır. Bu rehber, temel kavramlardan başlayarak ileri seviye konulara kadar derinlemesine açıklamalar, örnek kod blokları, kullanım senaryoları ve performans ipuçlarını içermektedir.

1. Vue.js Nedir?


Vue.js; kullanıcı arayüzleri ve tek sayfalık uygulamalar geliştirmek için kullanılan modern, açık kaynaklı bir JavaScript framework’üdür.

  • Köken ve Amaç:
    • 2014 yılında Evan You tarafından geliştirilmiştir.
    • AngularJS ve React gibi framework’lere alternatif olarak, daha basit, esnek ve performans odaklı bir yapı sunmayı amaçlar.
  • Mimari Yapı:
    • MVVM Pattern: Model-View-ViewModel yapısının esnekliğinden yararlanır.
    • Kademeli Adaptasyon: Çekirdek kütüphanesi yalnızca görünüm (view) katmanına odaklanır; ihtiyaç duyuldukça ek kütüphane ve eklentilerle genişletilebilir.
  • Özellikler ve Avantajlar:
    • Basit ve anlaşılır sözdizimi, zengin dokümantasyon ve geniş topluluk desteği.
    • Performans odaklı Virtual DOM yapısı sayesinde hızlı güncelleme ve minimum DOM manipülasyonu.
    • Vue CLI ve Vue Devtools gibi araçlarla geliştirme sürecini hızlandırır.

2. Tek Sayfa Uygulaması (SPA) Nedir?


SPA, tüm uygulamanın tek bir HTML sayfası üzerinden çalıştığı ve kullanıcı etkileşimlerine göre sadece gerekli bölümlerin dinamik olarak güncellendiği mimariyi ifade eder.

  • Özellikler:
    • Dinamik İçerik Güncellemesi: Sayfanın tamamı yeniden yüklenmez; sadece ilgili bileşenler güncellenir.
    • Hız ve Performans: Veri sadece gerektiğinde çekilir, bu da sunucu yükünü azaltır ve yanıt sürelerini hızlandırır.
  • Kullanım Alanları:
    • E-posta istemcileri, sosyal medya uygulamaları, dashboard’lar ve interaktif web uygulamaları.
  • Örnek Senaryo:
    • Bir e-posta uygulamasında, klasörler, başlıklar ve yan menü sabit kalırken, e-posta içeriği tıklama ile güncellenir.

3. Vue Örneği (Instance) ve Temel Yapı


Vue instance, MVVM mimarisinde ViewModel’i temsil eden temel yapı taşıdır.

  • Görev ve Sorumlulukları:
    • Bileşen Yönetimi: Bileşen hiyerarşisinin oluşturulması ve yönetilmesi.
    • Veri ve Durum Yönetimi: Uygulama verilerinin saklanması, güncellenmesi ve senkronizasyonu.
    • Yaşam Döngüsü Kontrolü: Oluşturma, güncelleme ve yok etme gibi aşamalarda belirli işlemlerin tetiklenmesi.
  • Örnek Kod:

new Vue({
el: '#app',
data: {
message: 'Merhaba Vue!'
},
methods: {
greet() {
console.log(this.message);
}
},
created() {
// Vue instance oluşturulduğunda çalışan ilk metod
this.greet();
}
});


4. Bileşen (Component) Yapısı


Vue bileşenleri, belirli bir işlevi veya kullanıcı arayüzü bölümünü temsil eden, yeniden kullanılabilir yapı taşlarıdır.

  • Özellikleri:
    • Modülerlik: Her bileşen kendi şablon, stil ve davranışını içerir.
    • İletişim: Üst ve alt bileşenler arasında veri akışı ve olay iletimi (props, events) ile etkileşim sağlanır.
  • Tanımlama Yöntemi:
    • Vue.component() fonksiyonu veya Single File Component (SFC) yapısı kullanılarak tanımlanabilir.
  • Örnek (SFC):

<template>
<div class="alert">
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
props: ['message']
}
</script>

<style scoped>
.alert { color: red; }
</style>


5. Donanımlar (Props) ve Aksesuarlar


Donanımlar (Props)

  • Tanım: Bileşenler arası veri aktarımının temel mekanizmasıdır.
  • Kullanım: Üst bileşenden alt bileşene veri geçişinde, bileşenin okunabilir özellikleri olarak tanımlanır.
  • Örnek:

<child-component :message="parentMessage"></child-component>



Aksesuarlar (Attributes)

  • Tanım: Bileşene ek özellikler eklemek için kullanılır.
  • Özellik: Genellikle HTML standart nitelikleri gibi davranır; bazı durumlarda props gibi işlenir.
  • Örnek Kullanım: Dinamik stil ve sınıf atamaları için v-bind ile birlikte kullanımı.

6. Vue.js Eklentileri (Plugins)


Eklentiler, Vue.js uygulamalarına ek işlevsellik kazandıran, yeniden kullanılabilir kod modülleridir.

  • Özellikler:
    • Uygulama düzeyinde global özellikler veya metotlar ekleyebilir.
    • Örneğin, uluslararasılaştırma (i18n), form doğrulama veya API entegrasyonlarında kullanılabilir.
  • Örnek Entegrasyon:

import Vue from 'vue';
import SomePlugin from 'some-plugin';

Vue.use(SomePlugin, { optionKey: 'optionValue' });


7. Mixins: Kodun Tekrarını Azaltma Yöntemi


Mixins, birden fazla bileşende kullanılabilecek ortak işlevsellikleri tanımlamak için idealdir.

  • Yerel Mixins:
    • Sadece ilgili bileşende eklenir.
  • Global Mixins:
    • Tüm Vue instance’larını etkiler, dikkatli kullanılmalıdır çünkü her bileşen bu özellikleri miras alır.
  • Örnek Kullanım:

const loggingMixin = {
created() {
console.log(`Bileşen ${this.$options.name} oluşturuldu.`);
}
};

new Vue({
mixins: [loggingMixin],
name: 'MyComponent'
});


  • Avantajlar:
    • Kod tekrarını azaltır, modülerliği artırır.
  • Dezavantajlar:
    • İsim çakışmaları ve karmaşık bağımlılıklar oluşturabilir.

8. Virtual DOM ve Performans İyileştirmeleri


Virtual DOM, gerçek DOM’un hafıza içi (in-memory) temsilidir.

  • Çalışma Prensibi:
    • Vue, veri değişikliklerini algıladığında sanal bir DOM oluşturur, önceki versiyon ile karşılaştırarak (diff algoritması) en az müdahale gerektiren güncellemeleri gerçek DOM’a yansıtır.
  • Faydaları:
    • Yüksek performans, minimum DOM güncellemesi ve optimize edilmiş render süreci.

9. Yaşam Döngüsü Kancaları (Lifecycle Hooks)


Vue bileşenleri, yaşam döngüsü boyunca belirli aşamalarda otomatik olarak çalışan metodlara sahiptir.

  • Temel Kancalar ve Kullanım Alanları:
    • beforeCreate: Veriler henüz tanımlanmamışken, ilk başlatma işlemleri yapılabilir.
    • created: API çağrıları, veri yükleme işlemleri bu aşamada gerçekleştirilebilir.
    • beforeMount / mounted: DOM ile etkileşim gerektiren işlemler, render sonrası DOM manipülasyonları yapılır.
    • beforeUpdate / updated: Veri güncellemeleri sonrası, UI senkronizasyonu ve ek işlemler.
    • beforeDestroy / destroyed: Bellek temizleme, event listener’ların kaldırılması gibi kapanış işlemleri.

10. Veri Bağlama (Data Binding) Teknikleri


Vue.js, veri ve UI arasında iki temel veri bağlama yöntemini destekler:

  • Tek Yönlü Veri Bağlama:
    • Sadece veri akışunun bileşenden arayüze gerçekleştiği durumlar.
    • Örneğin, {{ message }} kullanımı.
  • İki Yönlü Veri Bağlama:
    • Kullanıcı arayüzünde yapılan değişikliklerin bileşenin verisine de yansıdığı durumlar.
    • v-model direktifi form elemanlarında yaygın olarak kullanılır.
  • Örnek Senaryo:

<template>
<div>
<input v-model="userInput" placeholder="Bir şeyler yazın" />
<p>Girdiğiniz metin: {{ userInput }}</p>
</div>
</template>

<script>
export default {
data() {
return { userInput: '' }
}
}
</script>


11. Vuex ile Merkezi Durum Yönetimi


Vuex, büyük ölçekli Vue.js uygulamalarında durum (state) yönetimini merkezi bir depo (store) üzerinden gerçekleştirmek için kullanılır.

  • Temel Bileşenler:
    • State: Uygulamanın tüm verilerini barındırır.
    • Mutations: Senkron veri değişiklikleri yapar.
    • Actions: Asenkron işlemleri yönetir, mutations’ı tetikler.
    • Getters: State üzerinde türetilmiş verileri hesaplar.
    • Modules: Uygulamanın durumunu modüler parçalara böler.
  • Örnek Vuex Store:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
state: {
counter: 0
},
mutations: {
increment(state) {
state.counter++;
}
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
}
},
getters: {
doubleCounter: state => state.counter * 2
}
});


12. Filtreler (Filters) ile Şablon Dönüşümleri


Filtreler, şablonlarda görüntülenecek veriyi istenilen formatta dönüştürmek için kullanılır.

  • Tanımlama ve Kullanım:
    • Global olarak Vue.filter() ile tanımlanır,
    • Şablonda | operatörü ile uygulanır.
  • Örnek:

Vue.filter('capitalize', function(value) {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
});

<p>{{ 'vue.js' | capitalize }}</p>


13. Koşullu Render: v-if vs. v-show


Her iki direktif de koşullu render işlemleri için kullanılır, ancak aralarında önemli farklar bulunmaktadır:

  • v-if:
    • Koşul sağlanmadığında ilgili DOM elemanı tamamen oluşturulmaz.
    • Kullanım Alanı: Değişikliklerin nadiren olduğu durumlar, başlangıç yüklemesi düşük senaryolar.
  • v-show:
    • Eleman her zaman DOM’da bulunur, sadece CSS display özelliği ile görünürlük kontrol edilir.
    • Kullanım Alanı: Sık sık görünürlüğün değiştirilmesi gereken durumlar.
  • Karşılaştırmalı Tablo:

Özellik

v-if

v-show

DOM Manipülasyonu

Koşul false ise eleman DOM’da yok

Her zaman DOM’da bulunur

Performans Maliyeti

Geçiş sırasında render maliyeti yüksek

İlk oluşturma maliyeti yüksek

Esneklik

v-else, v-else-if desteği

Sadece temel koşullu render


14. Şablon (Template) Yapısı ve Söz Dizimi


Vue şablonları, bir bileşenin yapısını ve düzenini tanımlayan HTML benzeri yapılardır.

  • Özellikler:
    • HTML etiketlerinin yanı sıra Vue’ye özgü direktifler (v-bind, v-on, v-for vb.) içerir.
    • Bileşenler arası veri bağlama ve koşullu render işlemleri doğrudan şablon üzerinden yönetilir.
  • Gelişmiş İpuçları:
    • Şablon içindeki ifadelerin sade ve okunabilir tutulması performans açısından önemlidir.
    • Karmaşık mantıkların bileşen metodlarına taşınması önerilir.

15. Vue Router ile Yönlendirme


Vue Router, SPA’lerde URL yönetimi ve sayfa geçişlerini sağlayan resmi yönlendirme kütüphanesidir.

  • Temel Özellikler:
    • Dinamik Route Tanımlamaları: URL parametreleri, nested route yapıları ve isimlendirilmiş rotalar desteklenir.
    • Programatik Geçiş: Kod üzerinden this.$router.push() gibi metotlarla rota değiştirme.
  • Örnek Yapılandırma:

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

export default new Router({
mode: 'history',
routes: [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About }
]
});


16. $emit ile Bileşenler Arası İletişim


Vue.js’de $emit metodu, alt bileşenlerin bir olay tetikleyerek üst bileşene veri veya durumu iletmesini sağlar.

  • Kullanım Senaryosu:
    • Çocuk bileşende bir kullanıcı etkileşimi gerçekleştiğinde, üst bileşende tanımlı bir metodu çalıştırmak.
  • Örnek:

<!-- ChildComponent.vue -->
<template>
<button @click="notifyParent">Tıkla</button>
</template>

<script>
export default {
methods: {
notifyParent() {
this.$emit('childClicked', 'Veri gönderildi');
}
}
}
</script>

<!-- ParentComponent.vue -->
<template>
<child-component @childClicked="handleChildEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: { ChildComponent },
methods: {
handleChildEvent(data) {
console.log('Çocuk bileşenden gelen veri:', data);
}
}
}
</script>


17. Gelişmiş Vue.js Konuları: Vue 3 Yenilikleri ve Composition API


Vue 3 ile birlikte gelen bazı önemli gelişmeler:

  • Composition API:
    • Vue 2’de Options API’ye alternatif olarak, daha modüler ve yeniden kullanılabilir kod yazmayı sağlar.
    • Örnek Kullanım:

import { ref, reactive, onMounted } from 'vue';

export default {
setup() {
const count = ref(0);
const state = reactive({ message: 'Hello Vue 3!' });

onMounted(() => {
console.log('Bileşen monte edildi');
});

return { count, state };
}
}


  • Performans İyileştirmeleri:
    • Daha hızlı render, küçük paket boyutu ve gelişmiş TypeScript desteği.

18. Test ve Hata Ayıklama


Modern Vue.js uygulamalarında test yazımı ve hata ayıklama kritik öneme sahiptir:

  • Unit Test:
    • Jest, Mocha veya Vue Test Utils gibi araçlarla bileşen testleri yazılabilir.
  • Entegrasyon Testleri:
    • Vuex ve Vue Router gibi modüllerin birlikte çalışması test edilebilir.
  • Hata Ayıklama:
    • Vue Devtools, bileşen hiyerarşisi, state değişiklikleri ve performans analizi konularında destek sağlar.

19. Vue.js’de Performans ve Optimizasyon İpuçları

  • Lazy Loading:
    • Route veya bileşen bazında, ihtiyaç duyulana kadar yüklenmeyen yapılar oluşturmak.
  • Kod Bölme (Code Splitting):
    • Webpack veya benzeri araçlarla uygulamanın yüklenme süresini optimize etmek.
  • Verimli Render:
    • Gereksiz DOM güncellemelerinden kaçınmak için computed properties ve watcher’lar dikkatli kullanılmalı.
  • Profiling:
    • Vue Devtools ve tarayıcı performans araçları ile uygulamanın performansı analiz edilip, darboğazlar belirlenmeli.

20. Üçüncü Taraf Kütüphane Entegrasyonu ve İleri Düzey Konfigürasyonlar


Vue.js uygulamalarına dış kütüphaneleri entegre etmek için izlenen adımlar:

  1. Kurulum:
    • npm veya yarn ile kütüphanenin projeye eklenmesi.
  2. İçe Aktarım:
    • Gerekli modüllerin bileşen veya global yapılandırma dosyasında import edilmesi.
  3. Yapılandırma:
    • Kütüphaneye özel ayarların (örneğin, global event bus, interceptor’lar) tanımlanması.
  4. Entegre Çalışma:
    • Uygulamanın ilgili bölümlerinde kütüphanenin fonksiyonlarının ve metodlarının etkin kullanımı.

Sonuç


Bu geliştirilmiş rehber, Vue.js’in temel kavramlarından başlayarak ileri seviye konulara kadar derinlemesine bilgiler sunar. Mülakatlarda başarılı olmanız için;

  • Temel yapı taşlarını (Vue instance, bileşenler, veri bağlama) sağlam kavrayın,
  • İleri konulara (Composition API, Vuex, Vue Router, test ve optimizasyon) hakim olun,
  • Gerçek dünya senaryoları ve örnek kod bloklarıyla pratik yaparak bilgilerinizi pekiştirin.


Ayrıca, Vue.js dokümantasyonunu ve topluluk forumlarını düzenli olarak takip etmek, en güncel uygulama pratikleri ve geliştirme teknikleri hakkında bilgi sahibi olmanızı sağlayacaktır.


Bu rehberi, mülakat hazırlıklarınızda ve gerçek projelerde sağlam bir temel oluşturması için referans alabilirsiniz.