yoklateknik mülakat
GelişimGeçmiş

Frontend Vue Directives Templates Mülakat Soruları

75 doğrulanmış Frontend Vue Directives Templates 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 Directives TemplatesZorluk 1
Vue 3'te v-if ile v-show arasındaki temel fark nedir?
  • av-if yalnızca component'lerde çalışır, v-show yalnızca düz HTML elemanlarında
  • bv-if elemanı DOM'a ekler/DOM'dan kaldırır✓
  • cv-show'un else dalı olabilir, v-if'in olamaz
  • dAralarında fark yoktur — birbirinin yerine geçen takma adlardır
Açıklama:v-if elemanı ve component örneğini koşullu olarak render eder (ya da tamamen yok eder) — false olduğunda DOM'da hiçbir şey bulunmaz. v-show elemanı her zaman render eder ve sadece inline display: none CSS özelliğini açıp kapatır, bu yüzden eleman DOM'da kalır ve component state'ini korur.
Vue Directives TemplatesZorluk 1
<template>
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>
</template>

Bu template ne render eder?
  • aTüm items dizisini JSON olarak içeren tek bir <li>
  • bHiçbir şey, çünkü v-for bir index değişkeni gerektirir
  • cYalnızca benzersiz item.name değeri başına bir <li>
  • ditems içindeki her eleman için bir <li>✓
Açıklama:v-for="item in items", items dizisi üzerinde döner, her eleman için bir <li> oluşturur ve o iterasyonun kapsamında item'ı ilgili elemana bağlar, bu yüzden {{ item.name }} her item'ın kendi name'ini gösterir.
Vue Directives TemplatesZorluk 1
Vue template'inde :href="url" neyin kısaltmasıdır?
  • av-bind:href="url"✓
  • bv-on:href="url"
  • cv-model:href="url"
  • dv-slot:href="url"
Açıklama:Başındaki iki nokta : işareti, bir HTML attribute'unu reaktif bir ifadeye bağlayan v-bind: için kısaltmadır. :href="url" ve v-bind:href="url" tamamen eşdeğerdir.
Vue Directives TemplatesZorluk 1
Vue template'inde @click="handleClick" neyin kısaltmasıdır?
  • av-bind:click="handleClick"
  • bv-if:click="handleClick"
  • cv-on:click="handleClick"✓
  • dv-for:click="handleClick"
Açıklama:@ öneki, bir event listener ekleyen v-on: için kısaltmadır. @click="handleClick" ve v-on:click="handleClick" tamamen eşdeğerdir.
Vue Directives TemplatesZorluk 1
<template>
  <p v-if="status === 'ok'">All good</p>
  <hr />
  <p v-else>Something's wrong</p>
</template>

Bu template render edilince ne olur?
  • av-else, aralarında <hr /> olsa bile v-if ile doğru şekilde eşleşir
  • bBu geçersizdir — v-else, v-if elemanından hemen sonra gelen elemanda olmalıdır✓
  • cstatus'tan bağımsız olarak iki paragraf da aynı anda render edilir
  • dVue v-else'i sessizce yok sayar ve sadece ilk paragrafı gösterir
Açıklama:v-else (ve v-else-if), v-if taşıyan elemandan HEMEN SONRA gelen kardeş elemanda olmalıdır. Aralarına başka bir eleman (<hr /> gibi) girmesi bu bitişikliği bozar, bu yüzden Vue v-else'i v-if ile ilişkilendiremez ve bu geçersiz bir kullanımdır.
Vue Directives TemplatesZorluk 1
Vue neden her v-for item'ına benzersiz bir :key vermeyi önerir?
  • aVue'ya her item için sabit bir kimlik verir✓
  • bTamamen kozmetiktir ve sadece tarayıcı DevTools görünümünü etkiler
  • cv-for'un derlenmesi için zorunludur — olmazsa template build hatası fırlatır
  • dListeyi otomatik olarak artan key sırasına göre sıralar
Açıklama:key, Vue'nun virtual DOM diffing algoritmasına her item için sabit bir kimlik verir, böylece liste değiştiğinde (yeniden sıralama, ekleme, silme) Vue eski node'ları yenileriyle sadece index sırasına göre patch'lemek yerine doğru şekilde eşleştirebilir — bu, component state'ini korur ve görsel aksaklıkları önler.

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