Fortgeschrittene Vue-Patterns
Provide/inject, custom directives, render functions, JSX, teleport, suspense, async components
1Was ist der Hauptzweck von provide/inject in Vue 3?
Was ist der Hauptzweck von provide/inject in Vue 3?
Antwort
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.
2Wie deklariert man einen Wert mit provide in einer Komponente, die die Composition API verwendet?
Wie deklariert man einen Wert mit provide in einer Komponente, die die Composition API verwendet?
Antwort
In der Composition API verwendet man die provide-Funktion mit zwei Argumenten: einem Schlüssel (string oder Symbol) und dem bereitzustellenden Wert. Zum Beispiel innerhalb von setup. Dieser Wert ist für untergeordnete Komponenten über inject zugänglich. Die Verwendung von Symbols als Schlüssel garantiert Eindeutigkeit und vermeidet Namenskollisionen.
3Was ist die Hauptfunktion der Teleport-Direktive in Vue 3?
Was ist die Hauptfunktion der Teleport-Direktive in Vue 3?
Antwort
Teleport ermöglicht es, den Inhalt einer Komponente in einem anderen DOM-Knoten zu rendern, als es seine Position im Vue-Komponentenbaum vorgibt. Typischerweise wird es für Modals, Tooltips und Benachrichtigungen verwendet, die im Dokument-Root gerendert werden müssen, um Probleme mit z-index und CSS-Positionierung zu vermeiden. Die Komponente behält ihren Vue-Kontext und kann auf die Daten des Elternteils zugreifen.
Welches Attribut ist erforderlich, um Teleport in Vue 3 zu verwenden?
Was ist eine Custom Directive in Vue?
+21 Interview-Fragen
Weitere Vue.js / Nuxt.js-Interviewthemen
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
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
Zugang zu allen Fragen, Flashcards, technischen Tests, Code-Review-Übungen und Interview-Simulatoren.
Kostenlos starten