javascript / intermediate
Snippet
Optimierung von Listen mit v-memo
v-memo ist eine Performance-Direktive, die einen Teilbaum des Templates memoisiert. Der Teilbaum wird nur dann neu gerendert, wenn sich einer der Werte im bereitgestellten Array ändert. In großen Listen kann dies die Anzahl der DOM-Updates drastisch reduzieren.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
<template><div v-for="item in list" :key="item.id" v-memo="[item.id === selectedId]"><p :class="{ active: item.id === selectedId }">{{ item.name }}</p></div></template><script setup>import { ref } from 'vue';const list = ref([{ id: 1, name: 'Alpha' }, { id: 2, name: 'Beta' }]);const selectedId = ref(1);</script>
vue
Erklärung
1
v-memo="[item.id === selectedId]"
Das Element wird nur aktualisiert, wenn sich das Ergebnis dieses Vergleichs ändert.
2
:key="item.id"
Immer erforderlich bei v-for, um Vue bei der Identifizierung von Elementen zu unterstützen.