Snippet

Managing Leak-Free Object Metadata Using WeakMap in Vue Lifecycle Hooks

Attaching custom metadata to DOM elements or external objects via standard Maps can lead to memory leaks when components unmount and elements are removed. A WeakMap holds weak references to its object keys, allowing garbage collection to reclaim memory automatically without manual cleanup in unmount hooks.

snippet.js

javascript

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

Breakdown

const elementMetaRegistry = new WeakMap();

Creates a WeakMap where object keys are held weakly to avoid retaining memory when elements are deleted.

elementMetaRegistry.set(elementRef.value, {

Associates metadata records directly to the mounted DOM node instance.

const meta = elementMetaRegistry.get(el);

Retrieves the associated metadata for the given element without mutating the underlying DOM node directly.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Managing Leak-Free Object Metadata Using WeakMap in Vue Lifecycle Hooks

Related