{#key} pour forcer un nouveau rendu

{#key expr} détruit et recrée son contenu chaque fois que expr change. Il est utile lorsque vous voulez un composant neuf.

Enveloppez un élément animé dans {#key} pour rejouer la transition chaque fois que la clé change.

Enveloppez un composant enfant doté d’un état interne dans {#key id} pour réinitialiser complètement cet état lorsque l’identifiant change.

Le bloc {#key} associe une clé à un seul élément ; {#each ... (key)} associe des clés aux éléments d’une liste.

Utilisez-le lorsque vous souhaitez réinitialiser un état interne complexe sans effacer manuellement chaque champ.

Chaque changement de clé démonte et reconstruit le sous-arbre. Évitez d’envelopper de grands arbres si la clé change souvent.

Fermez avec {/key}.

Redémarrer des animations, réinitialiser des entrées non contrôlées, forcer une nouvelle récupération lors de la navigation vers une nouvelle entité.

Vous pouvez parfois réinitialiser l’état de manière impérative avec une référence. {#key} est plus clair pour les réinitialisations déclaratives.

Associez-le à des transitions pour signaler visuellement et en douceur qu’un changement fondamental s’est produit.

N’enveloppez pas le contenu purement réactif dans {#key} : Svelte le met déjà à jour efficacement.

{#key} force une destruction et une reconstruction complètes chaque fois que son expression change, ce qui est utile pour les réinitialisations et la répétition des animations.