javascript / intermediate
Snippet
Dynamisches Umschalten von Komponenten mit shallowRef
Die Verwendung von shallowRef für dynamische Komponenten ist eine Best Practice für die Performance in Vue. Im Gegensatz zu ref verfolgt shallowRef nur die .value-Eigenschaft selbst und verhindert, dass Vue die gesamte Komponenteninstanz rekursiv reaktiv macht, was unnötig und rechenintensiv wäre.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>import { shallowRef } from 'vue';import AdminView from './AdminView.vue';import UserView from './UserView.vue';const activeView = shallowRef(AdminView);const toggleView = () => {activeView.value = activeView.value === AdminView ? UserView : AdminView;};</script><template><component :is="activeView" /><button @click="toggleView">Switch View</button></template>
vue
Erklärung
1
const activeView = shallowRef(AdminView);
Erstellt eine flache reaktive Referenz auf den Komponenten-Konstruktor.
2
<component :is="activeView" />
Die integrierte dynamische Komponente, die rendert, was activeView zugewiesen wurde.