¿Cómo abordarías una tabla o lista muy grande en Vue sin colapsar el rendimiento?

Respuesta

• Virtualiza la lista para que el DOM solo contenga filas visibles, y separa claramente render de fila, selección y cálculo de filtros.
• Mantén keys estables y evita pasar a cada fila props recreadas en cada render si quieres que el coste no se dispare.
• Los filtros, ordenaciones o agrupaciones caras deberían hacerse una vez y no repetirse por fila ni por interacción trivial.

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>
  <VirtualList :items="rows" :item-size="44" key-field="id">
    <template #default="{ item }">
      <OrderRow :order="item" />
    </template>
  </VirtualList>
</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.