javascript / intermediate
Snippet
Umgehen des Overheads tiefer Reaktivität bei großen Datensätzen mit shallowRef
Standard-Vue-ref kapselt Arrays und alle verschachtelten Objekteigenschaften in reaktive Proxies, was bei Tausenden von Elementen zu erheblichem Speicher- und CPU-Overhead führt. Die Verwendung von shallowRef in Verbindung mit Object.freeze verfolgt nur Referenzänderungen auf oberster Ebene (.value), wodurch der Garbage-Collection-Druck drastisch gesenkt und die Handhabung großer Listen optimiert wird.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { shallowRef, triggerRef } from 'vue';export function useLargeDataset() {const records = shallowRef([]);function loadRows(newRows) {records.value = Object.freeze(newRows.map(row => ({...row,processedAt: Date.now()})));}function updateSingleRow(id, updatedFields) {const targetIndex = records.value.findIndex(item => item.id === id);if (targetIndex !== -1) {const updatedArray = [...records.value];updatedArray[targetIndex] = {...updatedArray[targetIndex],...updatedFields};records.value = Object.freeze(updatedArray);triggerRef(records);}}return { records, loadRows, updateSingleRow };}
vue
Erklärung
1
const records = shallowRef([]);
Erstellt eine flache reaktive Referenz, die nur auf Änderungen auf der Wurzelebene reagiert.
2
records.value = Object.freeze(newRows.map(...));
Friert verschachtelte Zeilenobjekte ein, um Unveränderlichkeit zu garantieren und tiefes Proxying zu überspringen.
3
triggerRef(records);
Benachrichtigt Watcher und Templates explizit darüber, dass der Inhalt der flachen Referenz aktualisiert wurde.