javascript / expert
Snippet
Performance-Optimierung durch shallowRef
Standardmäßig führt ref() eine tiefe Reaktivitätskonvertierung durch. Bei extrem großen Datensätzen oder Drittanbieter-Instanzen ist dieser Overhead erheblich. shallowRef() überwacht nur die .value-Eigenschaft selbst, was die Performance bei immutablen Mustern oder großen Kollektionen drastisch steigert.
snippet.js
1
2
3
4
5
6
7
8
9
import { shallowRef, triggerRef } from 'vue';const largeArray = shallowRef([/* millions of items */]);// This will NOT trigger reactivitylargeArray.value.push(newItem);// Manually trigger updates for performance gainstriggerRef(largeArray);
vue
Erklärung
1
const largeArray = shallowRef([...]);
Erzeugt eine Ref, die nur Zuweisungen an .value überwacht, keine internen Mutationen.
2
largeArray.value.push(newItem);
Modifiziert das interne Array ohne den teuren Proxy-Overhead auszulösen.
3
triggerRef(largeArray);
Benachrichtigt Abonnenten explizit darüber, dass sich der interne Zustand geändert hat.