javascript / expert
Snippet
Element-Zustandsverwaltung über reaktiven WeakMap-Speicher
WeakMap verwendet Objekte als Garbage-Collection-fähige Schlüssel. Die Kombination des WeakMap-Datentyps mit Vue's customRef ermöglicht die Zuordnung reaktiver Metadaten zu DOM-Elementen ohne Speicherlecks.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { customRef } from 'vue';const elementMeta = new WeakMap();export function useElementMetadata(targetEl) {if (!elementMeta.has(targetEl)) {elementMeta.set(targetEl, { clickCount: 0 });}return customRef((track, trigger) => ({get() {track();return elementMeta.get(targetEl);},set(newValue) {elementMeta.set(targetEl, newValue);trigger();}}));}
vue
Erklärung
1
const elementMeta = new WeakMap();
Instanziiert einen WeakMap-Datentyp, bei dem Schlüssel schwach gehalten werden, um Speicherlecks beim Entfernen von Elementen zu vermeiden.
2
return customRef((track, trigger) => ({
Erstellt eine explizite reaktive Referenz durch manuelle Steuerung der track- und trigger-Signale.
3
return elementMeta.get(targetEl);
Ruft das Ziel-Metadatenobjekt ab, das dem spezifischen DOM-Element-Schlüssel zugeordnet ist.