¿Cómo investigarías memory leaks o trabajo zombie en una app Vue que se degrada tras mucho tiempo abierta?

Respuesta

• Reproduce el problema durante tiempo suficiente y revisa watchers, listeners, intervals, sockets y tareas que siguen vivas tras abandonar la vista.
• Comprueba también componentes bajo keep-alive, porque pueden seguir activos de forma parcial aunque no estén visibles.
• Usa herramientas de heap o métricas simples para confirmar si hay crecimiento sostenido y qué objetos no se liberan nunca.

Puntos clave

• Para depurar bien en Vue conviene reducir el problema a una sola causa probable antes de tocar varias piezas a la vez.
• Los bugs más persistentes suelen mezclar asincronía, conservación de componentes y escrituras tardías sobre la misma fuente de verdad.
• Después de arreglar el síntoma hay que dejar una prevención: cleanup explícito, test, log de control o simplificación del flujo.

Errores comunes

• Cambiar varias capas a la vez puede esconder la causa real y hacer que el bug reaparezca con otra forma.
• Sin cleanup, cancelación o control de activación, los mismos problemas suelen volver tras unos cuantos cambios más.

Ejemplo de código

onMounted(() => {
  const handler = () => syncWithViewport();
  window.addEventListener("resize", handler);
  onUnmounted(() => window.removeEventListener("resize", handler));
});

watchEffect((onCleanup) => {
  const subscription = stream.subscribe(update);
  onCleanup(() => subscription.unsubscribe());
});

Ejemplo o caso real

En producción suele emerger tras varias iteraciones, cuando una pantalla ha ido acumulando watchers, fetches, navegación y componentes conservados en caché.

Idea clave

Depurar bien consiste en recortar el problema hasta que solo quede una causa creíble.