¿Qué problemas producen keys inestables, props mutadas y referencias nuevas en cada render?

Respuesta

• Keys inestables hacen que Vue reutilice o destruya nodos donde no debe, y eso suele romper foco, inputs y estado interno.
• Mutar props oculta la responsabilidad sobre el dato y vuelve ambiguo quién puede escribirlo, además de complicar depuración y reutilización.
• Crear referencias nuevas sin necesidad en cada render invalida comparaciones, dispara watchers y empeora el trabajo del árbol.

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>
  <TodoItem
    v-for="todo in todos"
    :key="todo.id"
    :todo="todo"
  />
</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.