{#each} imbriqués et mises à jour avec clé
Gérez les listes imbriquées et assurez des mises à jour efficaces du DOM avec des blocs each associés à une clé.
{#each} imbriqués et mises à jour avec clé est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Deux dimensions
Imbriquez des blocs {#each} pour afficher des tableaux, des grilles ou des arbres.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}Clés à chaque niveau
Ajoutez des clés à chaque niveau pour des mises à jour efficaces.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}Structures arborescentes
Utilisez des composants adaptés à la récursion ou des blocs each pour les données en forme d’arbre.
Éviter les clés fondées sur l’index
Utiliser l’index du tableau comme clé échoue lorsque des éléments sont insérés ou supprimés au milieu. Préférez un identifiant stable.
Piège des données mutables
Modifier des tableaux imbriqués sans réaffecter la référence externe rompt la réactivité. Réaffectez au niveau supérieur.
rows = rows.map(r => r.id === id ? {...r, name} : r);Filtrage et sort
Renvoyez toujours un nouveau tableau lors d’un filtrage ou d’un tri ; une modification sur place ne déclenchera pas de mise à jour.
sorted = [...items].sort();Performance
Les clés permettent d’ajouter, de supprimer ou de déplacer des éléments en O(n), au lieu de forcer de nouveaux rendus complets.
Réordonner des listes
Avec des clés, les animations de réordonnancement sont simples : combinez-les avec animate:flip.
Rendu conditionnel interne
Mélangez des blocs {#if} à l’intérieur d’un bloc each pour contrôler précisément les éléments affichés.
Un composant par élément
Pour les éléments complexes, rendez un composant enfant afin de garder le corps de la boucle court.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Modèle de pagination
Pour les longues listes, utilisez la pagination ou la virtualisation plutôt que de rendre des milliers de nœuds.
Vérification rapide
Pourquoi préférer des identifiants stables aux index pour les clés ?
Récapitulatif
Imbriquez des blocs each pour les données à deux dimensions, associez une clé stable à chaque niveau et réaffectez toujours les collections pour déclencher les mises à jour.
Questions Fréquemment Posées
La leçon « {#each} imbriqués et mises à jour avec clé » est-elle gratuite ?
Oui — le texte complet de « {#each} imbriqués et mises à jour avec clé » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « {#each} imbriqués et mises à jour avec clé » ?
Gérez les listes imbriquées et assurez des mises à jour efficaces du DOM avec des blocs each associés à une clé. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « {#each} imbriqués et mises à jour avec clé » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- {#if} {#else if} {#else}
- {#each} avec index et clé
- {#key} pour forcer un nouveau rendu
- {#each} imbriqués et mises à jour avec clé