# Fortgeschrittene Vue-Patterns (Vue.js / Nuxt.js)

> Provide/inject, custom directives, render functions, JSX, teleport, suspense, async components

- 24 Interview-Fragen
- Senior
- [Interview-Fragen: Vue.js / Nuxt.js](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen.md)

## 1. 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.

## 2. 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.

## 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.

## 21 weitere Fragen verfügbar

- Welches Attribut ist erforderlich, um Teleport in Vue 3 zu verwenden?
- Was ist eine Custom Directive in Vue?

Kostenlos registrieren: https://sharpskill.dev/de/login

## Weitere Vue.js / Nuxt.js-Interviewthemen

- [JavaScript-Grundlagen](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/javascript-fundamentals.md): 20 Fragen, Junior
- [Modernes JavaScript (ES6+)](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/es6-modern-javascript.md): 20 Fragen, Junior
- [Vue-Grundlagen](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-basics.md): 22 Fragen, Junior
- [Vue-Komponenten](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-components.md): 20 Fragen, Junior
- [Vue Router](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-router.md): 18 Fragen, Junior
- [Pinia State Management](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/pinia-state-management.md): 20 Fragen, Junior
- [Vuex (Legacy)](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vuex-legacy.md): 15 Fragen, Mid-Level
- [Composition API](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/composition-api.md): 24 Fragen, Mid-Level
- [Vue-Reaktivität](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-reactivity.md): 20 Fragen, Mid-Level
- [Nuxt-Grundlagen](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-fundamentals.md): 22 Fragen, Mid-Level
- [Nuxt Data Fetching](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-data-fetching.md): 20 Fragen, Mid-Level
- [Nuxt SSR & SSG](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-ssr-ssg.md): 22 Fragen, Mid-Level
- [Nuxt Server-Routes](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-server-routes.md): 20 Fragen, Mid-Level
- [Nuxt-Module](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-modules.md): 18 Fragen, Mid-Level
- [Vue Composables](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-composables.md): 20 Fragen, Mid-Level
- [Vue Formulare & Validierung](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-forms-validation.md): 20 Fragen, Mid-Level
- [Nuxt State Management](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-state-management.md): 18 Fragen, Mid-Level
- [Vue-Testing](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-testing.md): 20 Fragen, Mid-Level
- [Nuxt-Deployment & CI/CD](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-deployment-cicd.md): 22 Fragen, Mid-Level
- [Vue-Performance](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-performance.md): 22 Fragen, Senior
- [TypeScript mit Vue](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/typescript-vue.md): 22 Fragen, Senior
- [Nuxt-Authentifizierung](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-auth.md): 20 Fragen, Senior
- [SEO mit Nuxt](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-seo.md): 20 Fragen, Senior
- [Nuxt-Internationalisierung](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-i18n.md): 18 Fragen, Senior
- [Vue-Architektur](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-architecture.md): 22 Fragen, Senior
- [Nuxt-Sicherheit](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/nuxt-security.md): 20 Fragen, Senior
- [Vue-Ökosystem](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-ecosystem.md): 18 Fragen, Senior
- [Migration Vue 2→3 & Nuxt 2→3](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/migration-vue2-vue3-nuxt2-nuxt3.md): 22 Fragen, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-advanced-patterns