{#key} для принудительного повторного отображения

{#key expr} уничтожает и заново создаёт своё содержимое при каждом изменении expr. Это полезно, когда требуется новый экземпляр компонента.

Оберните анимируемый элемент в {#key}, чтобы повторно запускать переход при каждом изменении ключа.

Оберните дочерний компонент с внутренним состоянием в {#key id}, чтобы полностью сбрасывать это состояние при изменении id.

Блок {#key} задаёт ключ для одного элемента, а {#each ... (key)} — ключи для элементов списка.

Используйте этот подход, когда нужно сбросить сложное внутреннее состояние без ручной очистки каждого поля.

При каждом изменении ключа поддерево уничтожается и создаётся заново. Не оборачивайте большие деревья, если ключ меняется часто.

Закройте блок с помощью {/key}.

Перезапускать анимации, сбрасывать неуправляемые входные поля и принудительно выполнять новый запрос при переходе к другой сущности.

Иногда состояние можно сбросить императивно с помощью ссылки. {#key} обеспечивает более чистый способ декларативного сброса.

Сочетайте этот подход с переходами, чтобы создать плавный визуальный сигнал о принципиальном изменении.

Не оборачивайте чисто реактивное содержимое в {#key} — Svelte и так эффективно его обновляет.

Что делает {#key x} при изменении x?

{#key} принудительно полностью уничтожает и создаёт содержимое заново при изменении своего выражения, что полезно для сброса состояния и повторного запуска анимаций.