Вложенные {#each} и обновления по ключу
Работайте с вложенными списками и обеспечивайте эффективное обновление DOM с помощью блоков each с ключами
«Вложенные {#each} и обновления по ключу» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Два измерения
Вкладывайте блоки {#each}, чтобы отображать таблицы, сетки или деревья.
{#each rows as row, i}
<tr>
{#each row as cell, j}
<td>{cell}</td>
{/each}
</tr>
{/each}Ключи на каждом уровне
Добавляйте ключи на каждом уровне для эффективных обновлений.
{#each rows as row (row.id)}
{#each row.cells as cell (cell.id)}
...
{/each}
{/each}Древовидные структуры
Используйте компоненты, поддерживающие рекурсию, или блоки each для древовидных данных.
Не используйте индексы в качестве ключей
Использование индекса массива в качестве ключа не работает, когда элементы вставляются в середину или удаляются из неё. Предпочтительнее использовать стабильный идентификатор.
Ловушка изменяемых данных
Изменение вложенных массивов без переназначения внешней ссылки нарушает реактивность. Выполняйте переназначение на верхнем уровне.
rows = rows.map(r => r.id === id ? {...r, name} : r);Фильтрация и сортировка
При фильтрации или сортировке всегда возвращайте новый массив; изменение на месте не вызовет обновлений.
sorted = [...items].sort();Производительность
Ключи обеспечивают сложность O(n) при добавлении, удалении или перемещении элементов вместо принудительной полной перерисовки.
Изменение порядка списков
С ключами легко анимировать изменение порядка: сочетайте их с animate:flip.
Условная отрисовка внутри
Для точного контроля над отображаемыми элементами используйте блоки {#if} внутри each.
Компонент для каждого элемента
Для сложных элементов используйте дочерний компонент, чтобы сделать тело цикла небольшим.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Шаблон постраничного вывода
Для длинных списков используйте постраничный вывод или виртуализацию, а не отображайте тысячи узлов.
Быстрая проверка
Почему для ключей следует предпочитать стабильные идентификаторы индексам?
Итоги
Вкладывайте блоки each для двумерных данных, задавайте ключи на каждом уровне с помощью стабильных идентификаторов и всегда переназначайте коллекции, чтобы запускать обновления.
Часто задаваемые вопросы
Урок «Вложенные {#each} и обновления по ключу» бесплатный?
Да — полный текст урока «Вложенные {#each} и обновления по ключу» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Вложенные {#each} и обновления по ключу»?
Работайте с вложенными списками и обеспечивайте эффективное обновление DOM с помощью блоков each с ключами Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Вложенные {#each} и обновления по ключу»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- {#if} {#else if} {#else}
- {#each} с индексом и ключом
- {#key} для принудительного повторного отображения
- Вложенные {#each} и обновления по ключу