{#each} anidados y actualizaciones con clave
Gestione listas anidadas y garantice actualizaciones eficientes del DOM con bloques each con clave
{#each} anidados y actualizaciones con clave es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Dos dimensiones
Anide bloques {#each} para renderizar tablas, cuadrículas o árboles.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}Claves en cada nivel
Añada claves en cada nivel para obtener actualizaciones eficientes.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}Estructuras de árbol
Use componentes compatibles con la recursión o bloques each para datos con forma de árbol.
Evitar claves basadas en índices
Usar el índice del array como clave falla cuando se insertan o eliminan elementos en el medio. Prefiera un id estable.
Trampa de los datos mutables
Modificar arrays anidados sin reasignar la referencia externa rompe la reactividad. Reasigne en el nivel superior.
rows = rows.map(r => r.id === id ? {...r, name} : r);Filtrado y ordenación
Devuelva siempre un array nuevo al filtrar u ordenar; modificarlo directamente no activará las actualizaciones.
sorted = [...items].sort();Rendimiento
Las claves hacen que añadir, eliminar o mover elementos sea O(n), en lugar de forzar renderizados completos.
Reordenar listas
Con claves, las animaciones de reordenamiento son sencillas: combínelas con animate:flip.
Renderizado condicional interno
Combine bloques {#if} dentro de each para controlar con precisión qué elementos se muestran.
Un componente por elemento
Para elementos complejos, renderice un componente hijo para mantener pequeño el cuerpo del bucle.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Patrón de paginación
Para listas largas, use paginación o virtualización en lugar de renderizar miles de nodos.
Comprobación rápida
¿Por qué se prefieren los ID estables a los índices como claves?
Repaso
Anide bloques each para datos 2D, use ID estables como claves en cada nivel y reasigne siempre las colecciones para activar las actualizaciones.
Preguntas frecuentes
¿La lección «{#each} anidados y actualizaciones con clave» es gratis?
Sí — el texto completo de «{#each} anidados y actualizaciones con clave» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «{#each} anidados y actualizaciones con clave»?
Gestione listas anidadas y garantice actualizaciones eficientes del DOM con bloques each con clave Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «{#each} anidados y actualizaciones con clave»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- {#if} {#else if} {#else}
- {#each} con índice y clave
- {#key} para forzar el renderizado
- {#each} anidados y actualizaciones con clave