javascript / expert
Snippet
Optimierung mit ShallowRef und TriggerRef
Bei massiven Datenstrukturen ist tiefe Reaktivität teuer. ShallowRef verfolgt nur die .value-Eigenschaft. TriggerRef ermöglicht manuelle UI-Updates nach internen Mutationen, was einen massiven Performance-Schub bietet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
import { shallowRef, triggerRef } from 'vue';const largeState = shallowRef({ data: new Array(1000).fill(0) });function updateElement(index, value) {// Mutation doesn't trigger reactivity because it's shallowlargeState.value.data[index] = value;// Manually trigger updates for the shallow referencetriggerRef(largeState);}
vue
Erklärung
1
const largeState = shallowRef(...);
Erstellt eine Ref, die nur Updates auslöst, wenn die gesamte Objekt-Referenz ersetzt wird.
2
largeState.value.data[index] = value;
Mutiert die internen Daten, ohne Vues teures rekursives Proxy-System zu aktivieren.
3
triggerRef(largeState);
Teilt Vue explizit mit, die Shallow-Ref auf Änderungen zu prüfen und das DOM zu aktualisieren.