yoklateknik mülakat
GelişimGeçmiş

Frontend Vue Performance Testing Mülakat Soruları

75 doğrulanmış Frontend Vue Performance Testing 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 Performance TestingZorluk 1
<KeepAlive> built-in bileşeni dinamik bir bileşeni sardığında ne yapar?
  • aSarılan bileşeni her parent güncellemesinde yeniden render etmeye zorlar
  • bBileşen instance'ını yok etmek yerine önbelleğe alır✓
  • cBileşenin görünür olana kadar hiç mount olmasını engeller
  • dBileşenin JavaScript bundle'ını otomatik olarak lazy-load eder
Açıklama:<KeepAlive>, görünümden çıkarılan bir bileşenin instance'ını (state'i ve DOM'u dahil) unmount/destroy etmek yerine bellekte korur. Geri getirildiğinde yeni bir instance oluşturulmaz, aynısı yeniden kullanılır — <KeepAlive> ile sarılmış tab geçişlerinde formların ve scroll konumlarının hayatta kalmasının sebebi budur.
Vue Performance TestingZorluk 1
Ağır bir bileşen için normal import yerine neden defineAsyncComponent kullanırsın?
  • aBileşenin reactivity'sini otomatik olarak hızlandırır
  • bRuntime maliyetini azaltmak için bileşenin props validasyonunu devre dışı bırakır
  • cBileşeni gerektiğinde yüklenen ayrı bir chunk'a böler✓
  • dBileşeni Composition API'den Options API'ye çevirir
Açıklama:defineAsyncComponent, dinamik bir import() çağrısını sarar, bu yüzden build aracı o bileşen için ayrı bir JS chunk'ı oluşturur. Chunk yalnızca bileşen gerçekten render edilmesi gerektiğinde çekilir, bu da başlangıç bundle boyutunu azaltır — nadiren kullanılan veya ağır bileşenler (modal, grafik vb.) için faydalıdır.
Vue Performance TestingZorluk 1
Vue Test Utils'te hiçbir element eşleşmediğinde wrapper.get('.save'), wrapper.find('.save')'dan nasıl farklı davranır?
  • aget hata fırlatır; find ise exists() değeri false olan bir error wrapper döndürür✓
  • bget tüm eşleşmeleri, find yalnızca ilk eşleşmeyi döndürür
  • cget child bileşenlerde, find yalnızca native elementlerde arama yapar
  • dDavranış farkı yoktur; iki metot birbirinin alias'ıdır
Açıklama:get(selector), var olması zorunlu elementler içindir; selector hiçbir şeyle eşleşmezse açıklayıcı bir hata fırlatır. find(selector) ise opsiyonel elementler için kullanışlıdır: bir error wrapper döndürür ve aramanın kendisi hata fırlatmadan expect(wrapper.find('.save').exists()).toBe(false) gibi bir assertion yazılmasına izin verir.
Vue Performance TestingZorluk 2
<template>
  <div v-once>{{ expensiveGreeting }}</div>
  <button @click="count++">{{ count }}</button>
</template>

count değiştiğinde ve bileşen yeniden render olduğunda, <div> içeriğine ne olur?
  • aHer seferinde expensiveGreeting'in en son değerine günceller
  • bv-once'un başka yerdeki reaktif güncellemelerle çakışması nedeniyle runtime hatası fırlatır
  • cBileşen iki güncellemeden birinde yeniden render edilir
  • dİlk render edildiği haliyle tam olarak kalır, bir daha asla güncellenmez✓
Açıklama:v-once, bir elementi (ve alt elemanlarını) tam olarak bir kez render edip sonraki tüm yeniden render'larda atlanacak şekilde işaretler, o andan itibaren onu statik içerik gibi ele alır. count değişip bileşen yeniden render olsa bile, v-once div'i bu güncellemenin dışında tutulur — içeriği ilk render'da dondurulur.
Vue Performance TestingZorluk 2
import { mount } from '@vue/test-utils';
import Counter from './Counter.vue';

test('increments on click', async () => {
  const wrapper = mount(Counter);
  await wrapper.find('button').trigger('click');
  expect(wrapper.text()).toContain('1');
});

wrapper.text() üzerindeki assertion'dan önce neden await gerekiyor?
  • atrigger('click') click handler'ı arka plan thread'inde asenkron çalıştırır
  • btrigger, Vue'nun DOM güncelleme döngüsü (nextTick) tamamlandıktan sonra resolve olan bir promise döndürür✓
  • cawait yalnızca test framework'ünün sözdizimini karşılamak içindir, burada işlevsel bir etkisi yoktur
  • dawait olmadan test, trigger bir değer döndürmediği için TypeError fırlatır
Açıklama:Vue, reaktif DOM güncellemelerini toplu işleyip asenkron olarak (bir sonraki microtask tick'inde) uygular. wrapper.trigger(), Vue bekleyen DOM güncellemelerini uyguladıktan sonra resolve olan bir promise döndürür, bu yüzden onu await etmek, assertion çalışmadan önce DOM'un (ve dolayısıyla wrapper.text()'in) click'ten gelen state değişikliğini yansıttığından emin olur.
Vue Performance TestingZorluk 1
Vue Test Utils'te mount() ve shallowMount() arasındaki fark nedir?
  • amount() yalnızca Options API bileşenleriyle, shallowMount() yalnızca Composition API ile çalışır
  • bshallowMount() bileşeni CSS stillerinden hiçbirini uygulamadan render eder
  • cshallowMount() tüm child bileşenleri tam render etmek yerine stub'lar✓
  • dmount() gerçek bir tarayıcı DOM'u gerektirir, shallowMount() yalnızca Node.js'te çalışır
Açıklama:shallowMount(), hedef bileşeni tam render eder ama her child bileşeni hafif bir stub ile değiştirir (böylece iç mantıkları ve DOM'ları render edilmez). Bu, testi yalnızca test edilen bileşenle sınırlar. mount() ise tüm bileşen ağacını, tüm gerçek child'lar dahil render eder.

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