javascript / intermediate
Snippet
Speicherleckfreie Objekt-Metadatenverwaltung mittels WeakMap in Vue-Lebenszyklus-Hooks
Das Verknüpfen von Metadaten mit DOM-Elementen oder Objekten über reguläre Maps kann zu Speicherlecks führen, wenn Komponenten unmounted und Elemente entfernt werden. Eine WeakMap hält nur schwache Objektreferenzen als Schlüssel, wodurch die Garbage Collection den Speicher ohne manuelle Bereinigung im Unmount-Hook freigeben kann.
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
import { onMounted } from 'vue';const elementMetaRegistry = new WeakMap();export function useElementMetadataTracker(elementRef) {onMounted(() => {if (elementRef.value) {elementMetaRegistry.set(elementRef.value, {registeredAt: Date.now(),interactionCount: 0});}});const incrementInteraction = () => {const el = elementRef.value;if (el && elementMetaRegistry.has(el)) {const meta = elementMetaRegistry.get(el);meta.interactionCount += 1;}};return { incrementInteraction };}
vue
Erklärung
1
const elementMetaRegistry = new WeakMap();
Erzeugt eine WeakMap, deren Objektschlüssel schwach referenziert sind, um Speicherlecks beim Löschen von Elementen zu verhindern.
2
elementMetaRegistry.set(elementRef.value, {
Verknüpft Metadaten-Einträge direkt mit der gemounteten DOM-Knoten-Instanz.
3
const meta = elementMetaRegistry.get(el);
Liest die zugehörigen Metadaten für das Element aus, ohne den DOM-Knoten selbst zu manipulieren.