javascript / expert
Snippet
Optimierung großer Listen mit ShallowRef
Bei der Arbeit mit Tausenden von Objekten kann die Standard-Ref-Rekursion erheblichen Overhead verursachen. shallowRef verfolgt nur die .value-Eigenschaft selbst. Es überspringt die tiefe reaktive Konvertierung für verschachtelte Objekte, was einen massiven Performance-Schub für unveränderliche Datenstrukturen bietet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { shallowRef } from 'vue';const heavyList = shallowRef([{ id: 1, data: new Array(1000).fill(0) },{ id: 2, data: new Array(1000).fill(0) }]);// Trigger update by replacing the whole valuefunction updateList() {const newList = [...heavyList.value];newList.push({ id: 3, data: [] });heavyList.value = newList;}
vue
Erklärung
1
const heavyList = shallowRef([...]);
Erstellt ein Ref, das nur auf der Root-Ebene reaktiv ist, nicht rekursiv.
2
heavyList.value = newList;
Updates werden nur erkannt, wenn die gesamte Referenz ersetzt wird.
3
newList = [...heavyList.value];
Erfordert einen unveränderlichen Ansatz, um das reaktive System zu triggern, da interne Mutationen ignoriert werden.