javascript / intermediate
Snippet
Performance-Optimierung mit shallowRef
Im Gegensatz zu ref() führt shallowRef() keine tiefe reaktive Konvertierung durch. Nur der Zugriff auf .value ist reaktiv, was bedeutet, dass Änderungen an verschachtelten Eigenschaften keine Updates auslösen. Dies ist entscheidend für die Performance bei großen Datensätzen.
snippet.js
javascript
1
2
3
const largeList = shallowRef([{ id: 1, metadata: { ...veryLargeObject } }]);
vue
Erklärung
1
const largeList = shallowRef([
Initialisieren Sie eine flache reaktive Referenz für ein Array oder ein großes Objekt.
2
{ id: 1, metadata: { ... } }
Eigenschaften innerhalb dieser Objekte werden vom Proxy-System von Vue nicht verfolgt, was Speicher spart.