Question 1

Was ist der Hauptunterschied zwischen var und let in JavaScript?

Accepted Answer

Der grundlegende Unterschied liegt im Scope der Variablen. let hat Block-Scope, das heißt, eine mit let deklarierte Variable existiert nur innerhalb des Blocks, in dem sie definiert ist (zwischen geschweiften Klammern). var hat Funktions-Scope, was zu unerwartetem Verhalten führen kann, da die Variable außerhalb des Blocks zugänglich ist. Dieser Scope-Unterschied macht let zur empfohlenen Wahl, um Bugs im Zusammenhang mit Hoisting und Scope zu vermeiden.

Question 2

Was ist eine Promise in JavaScript?

Accepted Answer

Eine Promise ist ein Objekt, das den eventuellen Abschluss oder das Scheitern einer asynchronen Operation darstellt. Sie ermöglicht es, zeitaufwendige Operationen (HTTP-Anfragen, Dateilesevorgänge) zu handhaben, ohne die Codeausführung zu blockieren. Eine Promise kann drei Zustände haben: pending (wartend), fulfilled (erfolgreich aufgelöst) oder rejected (mit einem Fehler fehlgeschlagen).

Question 3

Was ist eine Vue-Instanz?

Accepted Answer

Eine Vue-Instanz ist das durch den Aufruf von createApp() erstellte Objekt, das die Anwendung repräsentiert. Dieses Root-Objekt enthält alle reaktiven Daten, Methoden und Konfigurationsoptionen. Es dient als Einstiegspunkt, um die Anwendung an ein DOM-Element zu mounten und Vues Reaktivitätssystem zu initialisieren.

Question 4

Was ist eine Vue-Komponente?

Accepted Answer

Eine Vue-Komponente ist eine wiederverwendbare Vue-Instanz mit einem Namen. Sie kapselt HTML, CSS und JavaScript in einer unabhängigen logischen Einheit. Komponenten ermöglichen es, die Benutzeroberfläche in wiederverwendbare und wartbare Teile zu zerlegen. Jede Komponente hat ihr eigenes Template, ihre eigene Logik und ihre eigenen Styles, was die Code-Organisation und die Wiederverwendbarkeit erleichtert.

Question 5

Was ist die minimal erforderliche Struktur für eine Nuxt-3-Anwendung?

Accepted Answer

Eine Nuxt-3-Anwendung benötigt nur eine app.vue-Datei oder ein pages/-Verzeichnis im Projektstammverzeichnis. Wenn app.vue ohne pages/-Ordner vorhanden ist, erstellt Nuxt eine Anwendung ohne Vue Router. Wenn pages/ existiert, aktiviert Nuxt automatisch das file-based routing und benötigt <NuxtPage /> in app.vue, um Routen anzuzeigen.

Question 6

Was ist der Hauptunterschied zwischen useFetch und useAsyncData in Nuxt?

Accepted Answer

useFetch ist ein Wrapper um useAsyncData und $fetch, der gängige API-Aufrufe vereinfacht. Es übernimmt automatisch die URL-Konstruktion und akzeptiert eine URL direkt als erstes Argument, während useAsyncData einen eindeutigen Schlüssel und eine benutzerdefinierte Fetcher-Funktion benötigt. Verwende useFetch für einfache API-Aufrufe und useAsyncData für komplexe Fetching-Logik.

Question 7

Was ist Server-Side Rendering (SSR) in Nuxt?

Accepted Answer

SSR generiert bei jeder Anfrage das vollständige HTML auf dem Server und sendet es anschließend an den Client. Dadurch wird das SEO verbessert, da Suchmaschinen sofort zugänglichen HTML-Inhalt erhalten, und auch die Zeit bis zum First Paint wird verkürzt. SSR ist der Standard-Rendering-Modus in Nuxt 3, im Gegensatz zum clientseitigen Rendering, bei dem JavaScript den Inhalt im Browser erzeugt.

Question 8

Was ist das Virtual DOM in Vue?

Accepted Answer

Das Virtual DOM ist eine leichtgewichtige JavaScript-Darstellung des echten DOM-Baums. Vue verwendet das Virtual DOM, um direkte DOM-Manipulationen zu minimieren, die in Bezug auf die Performance teuer sind. Bei einer Zustandsänderung erstellt Vue ein neues Virtual DOM, vergleicht es mit dem alten (Diffing-Algorithmus) und wendet dann nur die notwendigen Änderungen auf das echte DOM an. Dieser Ansatz reduziert die Anzahl der DOM-Operationen erheblich und verbessert die Performance, insbesondere bei komplexen Anwendungen mit vielen Aktualisierungen.

Question 9

Was ist der Hauptzweck von provide/inject in Vue 3?

Accepted Answer

Provide/inject ermöglicht es, Daten von einer übergeordneten Komponente an jede beliebige untergeordnete Komponente weiterzugeben, ohne props über jede Zwischenebene durchzureichen. Damit wird das 'props drilling' vermieden, bei dem props durch mehrere Komponentenebenen geleitet werden müssen, die sie gar nicht benötigen. Besonders nützlich, um globale Daten wie die Theme-Konfiguration oder den Authentifizierungsstatus zu teilen.

Question 10

Was ist die Hauptaufgabe von defineComponent in Vue 3 mit TypeScript?

Accepted Answer

defineComponent aktiviert die TypeScript-type-inference für die Komponentenoptionen. Ohne diese Funktion würde der this-Kontext in der Options API als any behandelt. Sie stellt sicher, dass props, data, computed und Methoden automatisch korrekt typisiert werden.

Vue.js / Nuxt.js Interview-Fragen

Bereit für dein Vue.js / Nuxt.js-Interview?

Alle Vue.js / Nuxt.js-Themen entdecken

JavaScript-Grundlagen

Modernes JavaScript (ES6+)

Vue-Grundlagen

Vue-Komponenten

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue-Reaktivität

Nuxt-Grundlagen

Nuxt Data Fetching

Nuxt SSR & SSG

Nuxt Server-Routes

Nuxt-Module

Vue Composables

Vue Formulare & Validierung

Nuxt State Management

Vue-Testing

Nuxt-Deployment & CI/CD

Vue-Performance

Fortgeschrittene Vue-Patterns

TypeScript mit Vue

Nuxt-Authentifizierung

SEO mit Nuxt

Nuxt-Internationalisierung

Vue-Architektur

Nuxt-Sicherheit

Vue-Ökosystem

Migration Vue 2→3 & Nuxt 2→3

Meistere Vue.js / Nuxt.js für dein nächstes Interview