Interviewfragen zu Vue mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

Vue · Junior

1. Was ist Vue?
   ▸Antwort zeigen

   Richtige Antwort: Ein progressives JavaScript-Framework zum Bauen von UIs

   „Progressiv“ heißt, man kann damit beginnen, eine einzelne Seite mit Vue anzureichern, und bis zur vollen SPA mit Routing (Vue Router), State-Verwaltung (Pinia) und SSR (Nuxt) wachsen. Die Kernbibliothek konzentriert sich auf die View-Schicht und Reaktivität.

2. Wie legt man ein neues Vue-Projekt empfohlen an?
   ▸Antwort zeigen

   Richtige Antwort: npm create vue@latest

   create-vue richtet ein Vite-basiertes Projekt ein und fügt optional TypeScript, Vue Router, Pinia, Vitest, ESLint und End-to-End-Tests hinzu. Die alte Vue CLI (webpack-basiert) ist im Wartungsmodus.

3. Was ist der Unterschied zwischen Options API und Composition API?
   ▸Antwort zeigen

   Richtige Antwort: Die Options API gruppiert Code nach Optionstyp, die Composition API nach Feature

   Beide werden in Vue 3 unterstützt. Die Composition API (meist über <script setup>) erleichtert die Wiederverwendung von Logik mit Composables und die Typableitung in TypeScript; die Options API ist für einfachere Komponenten weiterhin in Ordnung.

4. Was macht {{ message }} in einem Vue-Template?
   ▸Antwort zeigen

   Richtige Antwort: Rendert den Wert als escapten Text und hält ihn aktuell

   Die Mustache-Syntax gibt einfachen Text aus und ist damit sicher vor XSS. Um HTML zu rendern, braucht man v-html, das nie nicht vertrauenswürdige Inhalte bekommen sollte.

Vue · Middle

1. Wie unterscheidet sich watchEffect von watch?
   ▸Antwort zeigen

   Richtige Antwort: watchEffect läuft sofort und verfolgt, was es liest; watch ist lazy

   watchEffect ist knapp, wenn der Effekt denselben State nutzt, von dem er abhängt. watch gibt genaue Kontrolle: nur gelistete Quellen lösen ihn aus, und er kann immediate oder once sein.

2. Was bewirkt { deep: true } an einem Watcher?
   ▸Antwort zeigen

   Richtige Antwort: Er feuert bei verschachtelten Änderungen im beobachteten Objekt

   Ein reactive-Objekt direkt zu beobachten ist standardmäßig tief; einen Getter zu beobachten nicht. Tiefes Beobachten großer Strukturen ist teuer - in 3.5 kann man eine Zahl übergeben, um die Tiefe zu begrenzen.

3. Wann ist shallowRef die bessere Wahl gegenüber ref?
   ▸Antwort zeigen

   Richtige Antwort: Für große Daten, die sich nur durch Ersetzen von .value ändern

   ref macht verschachtelte Objekte über Proxys tief reaktiv, was bei riesigen Strukturen Zeit kostet. shallowRef verfolgt nur das Ersetzen von .value; nutze triggerRef, wenn du veränderst und ein Update erzwingen musst.

4. Warum ist es ein Bug, in einem computed-Getter State zu verändern?
   ▸Antwort zeigen

   Richtige Antwort: Getter müssen rein sein; Seiteneffekte können Schleifen auslösen

   Vue kann den Getter jederzeit ausführen (oder gar nicht, wenn ihn niemand liest). Nutze für Seiteneffekte einen Watcher und halte computed rein abgeleitet.

Vue · Senior

1. Wie verfolgt Vue 3 reaktive Abhängigkeiten?
   ▸Antwort zeigen

   Richtige Antwort: Proxy-Fallen get erfassen Abonnenten, Fallen set benachrichtigen sie

   Effekte (Render-Funktionen, computed, Watcher) registrieren sich, während sie laufen. Proxys fangen auch das Hinzufügen und Löschen von Properties und Änderungen an Array-Indizes ab, was die Getter/Setter von Vue 2 nicht konnten.

2. Warum ist reactive(obj) === obj false, und warum ist das wichtig?
   ▸Antwort zeigen

   Richtige Antwort: Es liefert einen Proxy, und Schreiben ins Original umgeht das Tracking

   Arbeite immer mit dem Proxy. reactive auf demselben Objekt liefert denselben Proxy, und toRaw(proxy) gibt das Original zurück, wenn man unverfolgten Zugriff braucht.

3. Warum führen 100 State-Änderungen in einem Handler nur zu einem Neurendern?
   ▸Antwort zeigen

   Richtige Antwort: Updates werden eingereiht und einmal in einer Microtask ausgeführt

   Jede Mutation löst Effekte aus, aber Render-Jobs werden in einer Warteschlange dedupliziert. nextTick() liefert das Promise dieses Durchlaufs.

4. Was passiert seit Vue 3.4, wenn ein computed auf denselben Wert neu berechnet wird?
   ▸Antwort zeigen

   Richtige Antwort: Abhängige werden gar nicht ausgelöst

   const isEven = computed(() => count.value % 2 === 0) lässt nachgelagerte Effekte nicht mehr erneut laufen, wenn count von 2 auf 4 geht. Jedes Mal ein neues Objekt zu liefern hebelt das weiterhin aus.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.