javascript / expert
Snippet
Verhindern von Speicherlecks in reaktiven Graphbäumen mittels WeakSet-Referenzen
Das Durchlaufen reaktiver Objekte kann bei zirkulären Abhängigkeiten zu Endlosschleifen oder Speicherlecks führen. Die Kombination von toRaw mit einem WeakSet ermöglicht das Erkennen besuchter Rohreferenzen, ohne die Garbage Collection nicht mehr referenzierter Knoten zu verhindern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { toRaw, reactive } from 'vue';export function createGraphNode(val) {const visitedNodes = new WeakSet();function sanitize(node) {const rawNode = toRaw(node);if (typeof rawNode !== 'object' || rawNode === null) return rawNode;if (visitedNodes.has(rawNode)) return '[Circular]';visitedNodes.add(rawNode);return rawNode;}const state = reactive({ value: val, children: [] });return { state, sanitize };}
vue
Erklärung
1
const rawNode = toRaw(node);
Entpackt den Vue-Reaktivitäts-Proxy, um die zugrunde liegende Rohobjekt-Referenz für Identitätsprüfungen zu erhalten.
2
if (visitedNodes.has(rawNode)) return '[Circular]';
Verwendet WeakSet zur Erkennung zirkulärer Referenzen, ohne starke Referenzen zu halten, die Speicherlecks verursachen.