¿Cómo decidirías entre `v-if`, `v-show`, componentes dinámicos, `keep-alive` y `Suspense` en un caso real?

Respuesta

• v-if suele ser mejor cuando alternas poco y el coste de mantener el subárbol activo no compensa.
• v-show encaja cuando el usuario alterna mucho y quieres conservar el nodo en DOM sin destruirlo.
• Usa keep-alive, componentes dinámicos o Suspense cuando realmente necesitas preservar estado o coordinar carga asíncrona de una sección concreta.

Puntos clave

• En Vue las mejoras de rendimiento más rentables suelen venir de quitar trabajo: menos renderizados, menos datos, menos bundle o menos efectos activos.
• Antes de optimizar hay que observar si el coste real está en render, red, serialización, hidratación o memoria; no todas las lentitudes se arreglan igual.
• Las técnicas como keep-alive, listas virtuales o componentes asíncronos ayudan cuando el cuello de botella es real; aplicarlas por costumbre añade complejidad.

Errores comunes

• Optimizar sin medir suele desplazar complejidad hacia el código sin tocar el cuello de botella real.
• Conservar o memorizar componentes por costumbre puede costar más que volver a renderizarlos.

Ejemplo de código

<template>
  <KeepAlive include="SearchView,ResultsView">
    <component :is="currentView" v-if="ready" />
  </KeepAlive>
  <Spinner v-else-if="loading" />
  <p v-else>No hay datos.</p>
</template>

Ejemplo o caso real

Suele aparecer en vistas con tablas, paneles laterales, gráficos o rutas pesadas donde el usuario percibe lentitud aunque el problema técnico real no esté donde parecía.

Idea clave

Rendimiento no es acumular técnicas; es quitar trabajo innecesario donde realmente duele.