Vue-Interviewfragen

Was ist der Unterschied zwischen ref und reactive? Wann nutzt man welches?

ref verpackt jeden Wert — auch Primitives — in ein Objekt mit einer .value-Eigenschaft, während reactive einen Proxy zurückgibt und nur mit Objekten funktioniert. ref übersteht Destructuring und Neuzuweisung, reactive nicht: Destrukturierst du ein reactive-Objekt, erhältst du plain values, die ihre Reaktivität verlieren. Die gängige Empfehlung ist, standardmäßig ref zu nehmen und nur bei einer eng zusammengehörigen Gruppe von Feldern zu reactive zu greifen.

Wie funktioniert Reaktivität in Vue 3? Was macht Proxy unter der Haube?

Vue 3 verpackt State in einen Proxy, der Property-Reads abfängt, um zu verfolgen, welche Effects davon abhängen, und Property-Writes, um diese Effects auszulösen. Anders als Object.defineProperty in Vue 2 erkennt ein Proxy das Hinzufügen und Löschen von Properties und funktioniert mit Arrays und Map, weshalb Vue.set nicht mehr nötig ist. Der Preis dafür ist, dass Proxy moderne Browser voraussetzt und dass die Reaktivität verloren geht, sobald man Werte aus dem Proxy herausdestrukturiert.

Erkläre den Unterschied zwischen computed und watch.

computed leitet einen Wert aus anderem reaktivem State ab, cached ihn und berechnet ihn nur neu, wenn sich eine Abhängigkeit ändert — nutze es immer dann, wenn das Ergebnis ein Wert ist, den du renderst. watch führt einen Seiteneffekt als Reaktion auf eine Änderung aus: Daten laden, in einen Storage schreiben, eine Animation auslösen. Wenn du innerhalb eines watchers eine Variable zuweist, ist fast immer computed die bessere Antwort.

Nenne die Lifecycle-Hooks in Vue 3.

In der Composition API sind das onBeforeMount und onMounted, onBeforeUpdate und onUpdated, onBeforeUnmount und onUnmounted, dazu onErrorCaptured, onActivated und onDeactivated für gecachte Komponenten. setup() selbst ersetzt beforeCreate und created. In onMounted gehören DOM-Zugriffe und Subscriptions, und in onUnmounted müssen sie wieder abgebaut werden.

Was sind Slots? Gib ein Beispiel für einen Scoped Slot.

Ein Slot ist eine Platzhalterstelle im Template einer Kindkomponente, die der Parent mit eigenem Markup füllt, wodurch Wrapper-Komponenten wiederverwendbar werden. Ein Scoped Slot gibt zusätzlich Daten vom Kind zurück an den Slot-Inhalt weiter — etwa eine Listen-Komponente, die das Laden und Iterieren übernimmt, während der Parent entscheidet, wie jedes Element gerendert wird. Das kehrt die Kontrolle um: Das Kind besitzt das Verhalten, der Parent die Darstellung.

Wie übergibt man Daten von einer Kindkomponente an den Parent?

Das Kind deklariert Events mit defineEmits und ruft emit mit einem Payload auf, der Parent hört mit v-on zu. Für Zwei-Wege-Bindung an einen einzelnen Wert ist v-model syntaktischer Zucker über einem Prop plus einem Update-Event. Einen Prop direkt zu mutieren ist nicht erlaubt, weil es den unidirektionalen Datenfluss bricht, der State-Änderungen nachvollziehbar macht.

Was ist Pinia, und warum wird es Vuex vorgezogen?

Pinia ist die offizielle State-Library für Vue 3: Stores sind einfache Funktionen mit state, getters und actions, Mutations gibt es gar nicht mehr. Es leitet TypeScript-Typen ohne manuelle Annotation ab, unterstützt standardmäßig modulare Stores statt verschachtelter Module und funktioniert sowohl mit der Options- als auch der Composition API. Das Ergebnis ist weniger Boilerplate und ein deutlich besserer Editor-Support als bei Vuex.

Was ist der Unterschied zwischen v-if und v-show?

v-if fügt das Element dem DOM hinzu oder entfernt es, kostet also Mount und Unmount, rendert bei false aber gar nichts — richtig für Inhalte, die selten umgeschaltet werden oder teuer im Rendering sind. v-show rendert das Element immer und schaltet nur CSS display um, das Umschalten ist also billig, aber die Komponente wird immer aufgebaut. Nutze v-show für etwas, das häufig umgeschaltet wird, etwa ein Dropdown.