yoklateknik mülakat
GelişimGeçmiş

Frontend Vue Components Props Mülakat Soruları

75 doğrulanmış Frontend Vue Components Props mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

Vue Components PropsZorluk 1
Vue 3'te bir üst bileşen, alt bileşene veriyi nasıl aşağı aktarır?
  • aAlt bileşenin açığa çıkardığı bir metodu çağırarak
  • bAlt bileşenin etiketine bir prop bağlayarak, ör. <Child :title="value" />✓
  • cAlt bileşenin iç durumunu doğrudan import ederek
  • dPaylaşılan bir global değişkeni mutasyona uğratarak
Açıklama:Prop'lar, Vue'da üst bileşenden alt bileşene tek yönlü veri aktarımının standart mekanizmasıdır: üst bileşen, alt bileşenin etiketindeki bir özniteliğe değer bağlar; alt bileşen de bunu almak için o adı props seçeneğinde (veya defineProps'ta) bildirir.
Vue Components PropsZorluk 1
Bir alt bileşen, üst bileşene bir şey olduğunu (ör. bir butona tıklandığını) nasıl bildirir?
  • aÜst bileşenin <script> bloğunda tanımlı bir metodu doğrudan çağırarak
  • bwindow'a yazıp üst bileşenin onu poll etmesini bekleyerek
  • cemit('event-name') ile özel bir olay yayarak; üst bileşen bunu @event-name ile dinler✓
  • dsetup() fonksiyonundan bir değer return ederek
Açıklama:Vue'nun standart alt bileşenden üst bileşene iletişimi özel olaylardır: alt bileşen, emit('event-name', payload) çağırır (defineEmits ile bildirilir); üst bileşen de alt bileşenin etiketinde @event-name="handler" ile dinler.
Vue Components PropsZorluk 2
<script setup>
const props = defineProps({
  count: { type: Number, default: 0 }
})
</script>
<template>
  <p>{{ count }}</p>
</template>

Üst bileşen bir count prop'u GEÇMEZSE, ne render edilir?
  • a0, çünkü prop geçilmediğinde default değeri kullanılır✓
  • bundefined, çünkü açık bağlama olmadan varsayılan uygulanmaz
  • cÇalışma zamanı hatası, çünkü count varsayılan olarak zorunludur
  • dNaN, çünkü Number tipleri yokken NaN'a varsayılanlanır
Açıklama:Vue'nun prop seçenekleri, çağıran o prop'u hiç geçmediğinde kullanılan bir default değeri destekler. Burada required ayarlanmadığı için count'u atlamak geçerlidir ve Vue 0'a düşer.
Vue Components PropsZorluk 2
Bir bileşenin template'inde, userName (camelCase) adlı bir prop üst bileşenin template'inden geçirilirken genelde nasıl yazılır?
  • aUserName, her zaman PascalCase
  • bUSER_NAME, tamamı büyük harf
  • cuserName, camelCase template'lerde de tam eşleşmeli
  • duser-name, kebab-case, çünkü HTML öznitelikleri büyük/küçük harfe duyarsızdır✓
Açıklama:HTML öznitelik isimleri büyük/küçük harfe duyarsız olduğu için, Vue template'leri prop bağlamalarında geleneksel olarak kebab-case (user-name) kullanır, oysa prop bileşenin script'inde camelCase (userName) bildirilmiştir. Vue ikisi arasında otomatik dönüşüm yapar.
Vue Components PropsZorluk 2
<!-- Child.vue -->
<script setup>
const props = defineProps(['label'])
props.label = 'changed'
</script>

Bu satır çalıştığında ne olur?
  • aProp'lar referansla paylaşıldığı için üst bileşenin orijinal değerini de sessizce günceller
  • bNormal çalışır — prop'lar alt bileşenin serbestçe yeniden atayabileceği sıradan reaktif değişkenlerdir
  • cVue bir çalışma zamanı uyarısı verir; prop'lar tek yönlü olduğundan doğrudan mutasyonları geliştirme modunda engellenir✓
  • dDüz JavaScript projelerinde bile derleme zamanı bir TypeScript hatası fırlatır
Açıklama:Prop'lar üst bileşenden alt bileşene tek yönlü akar. Vue'nun reactivity sistemi, bir bileşenin kendi props nesnesini alt bileşen tarafında etkin şekilde salt-okunur sayar — bir prop'u doğrudan mutasyona uğratmak geliştirme modu uyarısı tetikler ('Avoid mutating a prop directly') çünkü değişiklik geri yayılmaz ve yanlış bir iki-yönlü bağlama izlenimi yaratır.
Vue Components PropsZorluk 2
<script setup> bileşeninde defineEmits ne yapar?
  • aBileşenin kabul ettiği prop'ları tanımlar
  • bBileşenin herkese açık özel olay sözleşmesini ve isteğe bağlı olay doğrulamasını bildirir✓
  • cHer DOM olayını otomatik olarak üst bileşene yayar
  • dwindow nesnesine genel olay dinleyicileri kaydeder
Açıklama:defineEmits, bir bileşenin herkese açık özel olay sözleşmesini bildiren ve isteğe bağlı doğrulayıcı fonksiyonlar kabul eden bir derleyici makrosudur. Böylece Vue yayılan olayları doğrulayabilir; IDE'ler ve tip sistemleri doğru otomatik tamamlama ve tip kontrolü sağlayabilir. Bildirilmemiş bir olayla emit() çağırmak kesin bir çalışma zamanı yasağı değildir; çağrı geliştirme ortamında Vue uyarı verse de çalışabilir.

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla