yoklateknik mülakat
GelişimGeçmiş

Frontend Vue Composition Api Mülakat Soruları

75 doğrulanmış Frontend Vue Composition Api 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 Composition ApiZorluk 1
Vue 3'ün Composition API'sinde setup() fonksiyonu hangi iki argümanı alır?
  • adata ve methods
  • bprops ve context✓
  • cthis ve router
  • dstate ve dispatch
Açıklama:setup(props, context), Composition API'nin giriş noktasıdır. props, çözümlenmiş prop'ların reaktif bir nesnesidir, context ise attrs, slots, emit ve expose'u sunan düz bir nesnedir (props'un aksine kendisi reaktif DEĞİLDİR).
Vue Composition ApiZorluk 1
Bir <script setup> bloğunda, üst-seviye değişkenler ve fonksiyonlar component'in template'inde nasıl kullanılabilir hale gelir?
  • aOtomatik olarak — return gerekmez✓
  • bHer biri için defineExpose() çağırarak
  • csetup()'taki gibi bir return nesnesine ekleyerek
  • dYalnızca vue'dan import edilenler sunulur
Açıklama:<script setup>, derleme-zamanlı bir sözdizimi kolaylığıdır: blokta tanımlanan her üst-seviye bağlama (değişken, fonksiyon, import) otomatik olarak template'de kullanılabilir hale gelir — normal setup() fonksiyon formunun aksine hiç return ifadesi yoktur.
Vue Composition ApiZorluk 2
Vue composable'ları hangi isimlendirme kuralını izler ve neden?
  • aComposable ile bitmeleri gerekir
  • bBir kural yoktur
  • cuse ile başlarlar (ör. useMouse)✓
  • dBulundukları dosyanın adını alırlar
Açıklama:useXxx isimlendirme kuralı (React hook'larından ödünç alınmış) Vue'nun kendisinin zorunlu kıldığı bir dil kuralı değil, bir topluluk/tooling kuralıdır — ama okuyuculara ve linter'lara bu fonksiyonun muhtemelen içeride başka composition API'leri (ref, lifecycle hook'ları gibi) çağırdığını sinyaller.
Vue Composition ApiZorluk 2
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const box = ref(null);
    onMounted(() => {
      console.log(box.value.offsetWidth);
    });
    return { box };
  }
};

box'ın template'te bir <div ref="box">'e bağlı olduğunu varsayarsak, box.value.offsetWidth burada neden çalışır ama setup()'ın gövdesinde doğrudan okunsaydı neden başarısız olurdu?
  • aref() bağlamdan bağımsız her zaman null döner
  • bsetup() sırasında DOM elemanı henüz yoktur✓
  • coffsetWidth yalnızca lifecycle hook'ları içinde vardır
  • dconsole.log, setup() içinde çalışamaz
Açıklama:Template ref'ler, ancak component'in render çıktısı mount edildikten SONRA gerçek DOM elemanıyla doldurulur. setup(), bu mount işlemi gerçekleşmeden ÖNCE çalışır, bu yüzden box.value orada hâlâ nulldur — onMounted özellikle DOM'un var olduğunu garanti eden hook'tur.
Vue Composition ApiZorluk 1
Bir component'in setup() fonksiyonu içinde this neyi ifade eder?
  • amethods'daki gibi component instance'ını
  • bundefined✓
  • cParent component instance'ını
  • dGlobal window nesnesini
Açıklama:setup(), component instance'ı tamamen oluşturulmadan önce çalışır ve Vue içinde this'i açıkça bağlamaz — setup() içinde this kullanmaya çalışmak undefined döner. Bu, tüm state/mantığı bir instance yerine fonksiyonun kendi scope'u üzerinden (ref/reactive ile) geçirmeyi teşvik eden kasıtlı bir tasarım kararıdır.
Vue Composition ApiZorluk 2
// theme.js
import { inject } from 'vue';

export function useTheme() {
  const theme = inject('theme', 'light');
  return { theme };
}

Bir component useTheme()'i çağırıyor ama hiçbir üst (ancestor) component provide('theme', ...) çağırmamışsa, theme sonunda ne olur?
  • a'light'✓
  • bundefined, artı bir çalışma zamanı hatası
  • cBoş bir reaktif nesne
  • dBir provider mount olmasını bekler
Açıklama:inject(key, defaultValue), üst zincirinde eşleşen bir provide() çağrısı bulunamadığında kullanılan opsiyonel bir varsayılan değer kabul eder — hiçbir hata fırlatılmaz, theme burada basitçe 'light''a çözümlenir.

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