Vue.js Mülakat Soruları

Vue.js developer’lar tarafından sıklıkla tercih edilen bir JavaScript framework’üdür. Uçtan uca kullanıcı arayüzleri ve çok çeşitli tek sayfalık web uygulamaları geliştirmek için kullanılır. 

Vue.js developer’larına olan talep gün geçtikte artmaktadır. Bir teknik mülakata katılmadan önce, en çok sorulan Vue.js mülakat sorularını okuyarak Vue.js kavramları hakkında bilgi sahibi olabilirsiniz. İşte, sıklıkla sorulan Vue.js mülakat soruları. 💼👇

 

En Popüler Vue.js Mülakat Soruları

1. Vue.js nedir?

Vue.js, kullanıcı arayüzleri ve tek sayfalık uygulamalar oluşturmak için kullanılan bir JavaScript framework’üdür. 2014 yılında Evan You tarafından AngularJS ve React gibi framework’lere alternatif olarak oluşturulmuştur.

Vue.js, MVVM (Model - View - ViewModel) Pattern'den ilham almıştır ve bunu yüksek kaliteli tek sayfalık uygulamalar oluşturmak için kullanır. Vue.js'nin çekirdek kütüphanesi yalnızca görüntüleme katmanına odaklanır ve projelere kademeli olarak uyarlanmak üzere tasarlanmıştır.

Vue.js, tek bir sözdizimi üzerinde çalışır ve basit bir tasarıma sahiptir. Vue, çok sayıda yerleşik özelliğe sahiptir. Bu özelliği de onun developer’lar tarafından tercih edilmesini sağlar. 

 

2. Tek Sayfa Uygulaması nedir?

Tek sayfa uygulaması (SPA), birçok bilginin aynı kaldığı ve aynı anda yalnızca birkaç parçanın güncellenmesi gereken tek bir sayfadır. Örneğin, e-postanıza göz attığınızda, sayfada gezinme sırasında pek bir değişiklik olmadığını fark edebilirsiniz. Siz gelen kutunuzda gezinirken kenar çubuğu ve başlıklar aynı kalır.

SPA, her tıklamada yalnızca ihtiyaç olanı gönderir ve tarayıcı bu bilgileri işler. Bu, sunucunun yaptığı her tıklamada tam sayfayı yeniden oluşturduğu ve tarayıcıya gönderdiği geleneksel sayfa yüklemesinden farklıdır.

Bu istemci taraflı yöntem, yükleme sürelerini kullanıcılar için çok daha hızlı hale getirir. Ayrıca, bir sunucunun göndermesi gereken bilgi miktarını azaltır ve tüm süreci çok daha uygun maliyetli hale getirir.

 

3. Vue örneği (instance) nedir? 

✅ Vue instance, Model-View-ViewModel (MVVM) mimarisinde ViewModel'i temsil eden bir Vue sınıfı örneğidir. 

✅ Vue instance, bileşen hiyerarşisini oluşturmak, yönetmek, verileri ve durum yönetimini gerçekleştirmek ve yaşam döngüsünü işlemekten sorumludur.

Temel bir Vue örneği 👇:

• el: Vue örneğinin bağlanması gereken DOM öğesini belirtir.
• data: Uygulamanın durumunu içeren veri nesnesini belirtir.

 

4. Vue.js'de bileşen (component) nedir? 

Vue.js’nin önemli bir özelliği, bileşenleri kullanma yeteneğidir. Bileşenler (Component), özel HTML öğeleriyle yeniden kullanılabilir Vue örnekleridir. 

Vue.js bileşenleri, uygulamadaki belirli bir özelliğin veya UI öğesinin şablonunu, stilini ve davranışını kapsar. Bir bileşen, diğer bileşenlerden oluşabilir ve diğer bileşenlerle olaylar aracılığıyla iletişim kurabilir.

⬇️ Vue.js içinde bileşen oluşturmak için 'Vue.component()' yöntemi kullanılabilir. 

 

5. Vue'daki donanımlar (prosps) ve aksesuarlar nedir?

👉 Donanımlar (props), Vue.js'deki bileşenler arasında veri aktarmanın en temel yollarından biridir. 

👉 Aksesuarlar, bir bileşene kaydedilebilen özel niteliklerdir. Üst bileşenden alt bileşenlerine veri aktarmak için kullanılırlar. 

 

6. Vue'daki eklentiler nelerdir?

Eklentiler, Vue.js'ye uygulama düzeyinde işlevsellik ekleyen bağımsız kodlardır. Eklentiler (plugins) kodun yeniden kullanılabilirliğini sağlar. Bir eklenti, bir nesne veya işlev olarak tanımlanabilir. 

📍 Vue.js Plugin syntax:

 

7. Vue.js Mixins özelliği nedir? Nasıl Kullanılır?

Karışımlar, aynı eylemi gerçekleştiren Vue bileşenlerinde kodu yeniden kullanmayı sağlayan kavramlardır. Bazı eylemler karışımlarda tanımlanabilir ve gerekli olan her yerde kullanılabilir. 

Karışımların yardımıyla kodun yeniden kullanılabilirliği sağlanır. Bir bileşen bir karışım kullandığında, karışımda tanımlanan tüm özellikleri ve yöntemleri devralır.

 

Vue'da iki tür karışım vardır: 

1️⃣ Local (Yerel) Mixins – Yerel karışımlar yalnızca Vue bileşeninde mixin nesnesini kullandığımızda çalışır. 

 

2️⃣ Global Mixins - Vue'daki tüm bileşenler için aynı işlevselliğe ihtiyaç varsa, global karışımlar kullanılır. Global karışımlar her Vue bileşenini etkiler.

Bir mixin oluşturmak için, Vue.mixin() fonksiyonunu kullanabilirsiniz.

 

8. Vue.js Mixins’in avantajları ve dezavantajları nelerdir?

 

9. Vue.js'de Virtual Dom nedir?

Belge Nesne Modeli veya diğer bir adıyla DOM, tüm biçimlendirme dillerine bağlı düğümler gibi davranan bir tür arabirimdir. DOM, öğeler üzerine yazı yazmayı, stilleri değiştirmeyi ve hatta öğelerin kendilerini değiştirmeye yarar. 

Vue.js'deki Sanal DOM (VDOM), bir web sayfasının gerçek Belge Nesne Modeli'nin (DOM) bellek içi temsilidir. Bir Vue.js bileşeni oluşturulduğunda veya güncellendiğinde, mevcut durumunun bir VDOM temsili oluşturulur. Bu daha sonra, güncellenen durumu yansıtmak için gerçek DOM'da yapılması gereken minimum değişiklik kümesini belirlemek için önceki VDOM temsiliyle karşılaştırılır. Bu, özellikle büyük ve karmaşık uygulamalarda önemli performans iyileştirmeleri sağlar.

 

10. Vue.js lifecycle hook (yaşam döngüsü kancası) nedir?

🌀 Yaşam döngüsü kancaları, bir Vue bileşeni oluşturulduğunda, güncellendiğinde veya yok edildiğinde tetiklenen önceden tanımlanmış yöntemlerdir.Bu kancalar, uygulamanın farklı aşamalarında kodu çalıştırmaya yardımcı olur. 

Vue.js'de sekiz yaşam döngüsü kancası vardır:

1- BeforeCreate: Vue.js'de çağrılan ilk yaşam döngüsü kancasıdır. Verileri başlatmak için kullanılır. 

 

2- created: Bileşen oluşturulduktan sonra çağrılır. API'den veri alma gibi ilk kurulum işlemler için kullanılır.

 

3- BeforeMount: Bileşen DOM'a monte edilmeden önce çağrılır. Bileşeni işlemeden önce gerekli DOM manipülasyonlarını gerçekleştirmek için kullanılır.

 

4- mounted: Bileşen gerçek DOM'a monte edildiğinde tetiklenir. Bileşen oluşturulduktan sonra gerekli DOM manipülasyonlarını gerçekleştirmek için kullanılır.

 

5- BeforeUpdate: Bileşen güncellenmeden önce, güncelleme öncesi görevleri gerçekleştirmek için çağrılır. 

 

6- updated: Bileşen güncellendikten sonra çağrılır. Gerekli güncelleme sonrası görevleri gerçekleştirmek için kullanılır. 

 

7- beforeDestroy: Vue örneği yok edilmeden, bileşen DOM'dan çıkarılmadan hemen önce çağrılır. 

 

8- destroyed: Tüm Vue örneğinin yok edildiği son aşamadır. 

 

11. Vue.js'de Veri Bağlama (Data Binding) nedir?

Vue.js’de veri bağlama, kullanıcı arayüzündeki öğelerin (HTML elementleri) içeriklerini veya özelliklerini Vue bileşeninin verilerine bağlama işlemidir. Vue örneği ile DOM arasında verileri senkronize etmeye yarar. 

Veriler ile UI arasında bağlantı kurmamızı sağlar, böylece verilerde yapılan herhangi bir değişiklik otomatik olarak UI'ye yansıtılır ve UI'de yapılan değişiklikler otomatik olarak verilere yansıtılır.

 

1️⃣ İki Yönlü Veri Bağlama (Two-Way Data Binding): Veriler hem bileşenin içinde hem de kullanıcı arayüzünde güncellenebilir. 

2️⃣ Tek Yönlü Veri Bağlama (One-Way Data Binding): Veriler sadece bileşenin içinde güncellenir ve kullanıcı arayüzüne yansıtılır. Kullanıcı arayüzündeki değişiklikler bileşen verisini etkilemez. 

 

12. Vue VUEX nedir?

Vuex, Vue.js uygulamaları için bir durum yönetimini sağlayan model ve kütüphanedir. Uygulamanın durumunu yönetmek için merkezi bir depo tanımlamaya izin verir. Farklı bileşenlerden duruma erişmenin ve durumu değiştirmenin bir yolunu da sağlar. 

 

Vuex, şu temel bileşenleri içerir:

1️⃣ State (Durum): Uygulamanın verilerini içeren merkezi bir nesnedir. 

2️⃣ Mutations: Durumu değiştirmek için kullanılan işlevlerdir. 

3️⃣ Actions: Asenkron işlemleri yönetmek ve mutasyonları tetiklemek için kullanılır. 

4️⃣ Getters: Durumu işleyerek yeni veriler oluşturmayı sağlar. 

5️⃣ Modules: Büyük ölçekli uygulamalarda durumu daha küçük ve yönetilebilir parçalara bölmeyi sağlar.

 

13. Vue.js'de filtre nedir? 

Vue.js'de filtreler, şablonlardaki verileri dönüştürmek için kullanılabilen işlevlerdir. Vue.js'deki filtreler, verilerin depolandığı her yeri doğrudan değiştirmez, yalnızca verilere biçimlendirme uygular.

📍 Filtreler, Vue.filter() yöntemi kullanılarak Vue.js uygulamasına eklenebilir ve ardından '|' kullanılarak şablon ifadelerinde kullanılabilir. 

 

14. Vue.js'de 'v-if' ve 'v-show' direktifleri nedir?

'v-if' ve 'v-show', kullanıcı arabirimindeki öğelerin koşullu olarak işlenmesine izin veren yönergelerdir. 

👉 v-if, bir bloğu koşullu olarak işlemek için kullanılır. Blok, yalnızca yönergenin ifadesi doğru bir değer döndürürse işlenir.

 

👉v-show, bir öğeyi koşullu olarak görüntülemek için kullanılan yönergedir. 

 

15. v-if ve v-show direktifleri arasındaki farklar nelerdir? 

• ​🆚 v-if’te öğeler DOM'a dahil değil. v-show’da ise öğeler DOM'a dahildir ancak gizlidir.
• 🆚 v-if, v-else ve v-else-if ile kullanılabilir. v-show, v-else ve v-else-if ile kullanılamaz.
• 🆚 v-show çok daha basittir. V-if daha zordur. 
• 🆚 v-if daha yüksek geçiş maliyetlerine ve v-show daha yüksek ilk oluşturma maliyetlerine sahiptir.

 

16. Vue.js'de şablon (template) nedir? 

Template ya da şablon, bir Vue.js uygulamasındaki bir bileşenin yapısını ve düzenini tanımlayan bir HTML parçasıdır. Vue uygulamasının HTML kısmı olarak adlandırılır. 

Bunlar normal HTML koduna çok benzer, ancak Vue'ye özgü syntax ve yönergeleri içerirler. Verilerin kullanıcı arayüzüne bağlanmasına ve kullanıcı girişinin işlenmesine olanak tanır.

 

17. Vue.js routers (yönlendiriciler) nedir?

Vue routers, tarayıcının URL'si/geçmişi ile Vue'nun bileşenleri arasında bağlantı kurulmasına yardımcı olan kütüphanedir. 

Yönlendirme, kullanıcıların tek sayfalık uygulamanın yeniden yüklemesini beklemeden farklı sayfalar veya görünümler arasında gezinmesine olanak tanır. Böylece sayfanın tamamı yenilenmediğinde, bir mobil/masaüstü uygulaması kullanıyormuş gibi hissettirir. Sayfanın tamamı yeniden yüklenmediği için performansı da artırır.

Aşağıdaki komut kullanılarak Vur routers kullanılabilir 👇.

 

18. Vue js $Emit nedir?

Vue.js'de $emit, ebeveyn bileşenin içindeki bir olayı tetiklemek ve bu olayı dinleyen ebeveyn bileşenlerde veya daha üst hiyerarşideki bileşenlerde bir işlem gerçekleştirmek için kullanılan bir yöntemdir. Yani, alt bileşenlerdeki olayları üst bileşenlere iletmek için kullanılır.

 

19. Vue.js’deki direktifler nelerdir?

• ✅ v-for: Bir dizide veya nesnede döngü yapmak ve her öğe için bir şablon oluşturmak için kullanılır. 
• ✅ v-bind: Verileri bir elemanın niteliklerine, özelliklerine veya stillerine dinamik olarak bağlamak için kullanılır.
• ✅ v-on: Olay tetiklendiğinde olay dinleyicilerini DOM öğelerine ve çağrı yöntemlerine eklemek için kullanılır.
• ✅ v-model: İki yönlü veri bağlamaları oluşturmak için kullanılır.

 

20. Vue.js’de üçüncü taraf kütüphanesi uygulamaya nasıl entegre edilir?

Üçüncü taraf bir kütüphaneyi Vue.js uygulamasına entegre etmek için şu adımlar izlenebilir:

1️⃣ Kütüphaneyi kurun: İlk adım, kullanmak istediğiniz üçüncü taraf kütüphaneyi npm veya yarn gibi paket yöneticileri kullanarak projenize eklemektir.

2️⃣ Kütüphaneyi içe aktarın: Kütüphanenin bileşenlerini veya işlevlerini Vue bileşeninizde veya dosyanızda kullanabilmeniz için kütüphaneyi içe aktarmanız gerekir.

3️⃣ Kütüphaneyi kullanın: Kütüphaneyi kullanmaya başlamadan önce yapılandırmanız veya başlatmanız gerekir.