嵌套的 {#each} 与基于键的更新
处理嵌套列表，并使用基于键的 each 块确保高效更新 DOM。
嵌套的 {#each} 与基于键的更新 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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。
内部条件渲染
在 each 块中混合使用 {#if} 块，以精细控制显示哪些项目。
每个项目一个组件
对于复杂项目，请渲染子组件，以保持循环主体简洁。
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}分页模式
对于较长的列表，请使用分页或虚拟化，而不是渲染数千个节点。
快速检查
为什么键应优先使用稳定的标识符，而不是索引？
回顾
对二维数据嵌套使用 each 块，在每一层使用稳定的标识符作为键，并始终重新赋值集合以触发更新。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「嵌套的 {#each} 与基于键的更新」课时是免费的吗？
是的 — 「嵌套的 {#each} 与基于键的更新」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「嵌套的 {#each} 与基于键的更新」这节课中我会学到什么？
处理嵌套列表，并使用基于键的 each 块确保高效更新 DOM。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「嵌套的 {#each} 与基于键的更新」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- {#if} {#else if} {#else}
- 带索引和键的 {#each}
- 使用 {#key} 强制重新渲染
- 嵌套的 {#each} 与基于键的更新