# Vue-Performance (Vue.js / Nuxt.js) > Virtual DOM, Optimierung der Reaktivität, v-once, v-memo, Lazy Loading, Code Splitting, Bundle-Größe - 22 Interview-Fragen - Senior - [Interview-Fragen: Vue.js / Nuxt.js](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen.md) ## 1. Was ist das Virtual DOM in Vue? **Antwort** 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. ## 2. Was ist der Hauptunterschied zwischen ref() und shallowRef()? **Antwort** ref() erstellt eine tief reaktive Referenz, bei der auch alle verschachtelten Eigenschaften reaktiv sind, während shallowRef() nur die .value-Eigenschaft selbst reaktiv macht. Bei shallowRef() lösen tiefe Mutationen innerhalb des Objekts keine Aktualisierungen aus. Der gesamte .value muss ersetzt werden, um die Reaktivität auszulösen. shallowRef() ist nützlich, um die Performance bei großen Datenstrukturen zu optimieren, bei denen tiefe Reaktivität nicht benötigt wird, oder um externe State-Systeme zu integrieren. ## 3. Welche Rolle spielt die v-once-Direktive? **Antwort** Die v-once-Direktive rendert ein Element und seine Kinder nur einmal beim ersten Rendern und behandelt sie dann bei allen folgenden Renderings als statischen Inhalt. Das bedeutet, dass das Element selbst dann nicht aktualisiert wird, wenn sich die Daten ändern. Diese Direktive ist nützlich, um die Performance von statischem Inhalt zu optimieren, der sich nach dem initialen Mounten nie ändert, wie Bannerbilder, Logos oder Text, der keine dynamischen Aktualisierungen benötigt. ## 19 weitere Fragen verfügbar - Wie funktioniert die in Vue 3.2+ eingeführte v-memo-Direktive? - Was ist der Zweck von markRaw() 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 - [Fortgeschrittene Vue-Patterns](https://sharpskill.dev/de/technologies/vue-nuxt/interviewfragen/vue-advanced-patterns.md): 24 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-performance