默认情况下，更新 each 块的值会在块大小发生变化时在块末尾添加或删除 DOM 节点，并更新剩余的 DOM。这可能不是你想要的。

¥By default, updating the value of an each block will add or remove DOM nodes at the end of the block if the size changes, and update the remaining DOM. That might not be what you want.

说明原因比解释更容易。在 Thing.svelte 内部，name 是一个动态 prop，但 emoji 是一个常量。

¥It’s easier to show why than to explain. Inside Thing.svelte, name is a dynamic prop but emoji is a constant.

单击 ‘删除第一件事’ 按钮几次，注意会发生什么：

¥Click the ‘Remove first thing’ button a few times, and notice what happens:

1. 它删除了最后一个组件。

   ¥It removes the last component.

2. 然后，它会更新剩余 DOM 节点中的 name 值（包含 ‘doughnut’ 的文本节点现在包含 ‘egg’，依此类推），但不更新表情符号。

   ¥It then updates the name value in the remaining DOM nodes (the text node containing ‘doughnut’ now contains ‘egg’, and so on), but not the emoji.

如果你之前使用过 React，这可能看起来很奇怪，因为你习惯于在状态更改时重新渲染整个组件。Svelte 的工作方式有所不同：组件先 ‘runs’，后续更新则使用 ‘fine-grained’。这使得处理速度更快，并赋予你更多控制权。

一种修复方法是将 emoji 设为 $derived 值。但是，完全删除第一个 <Thing> 组件比删除最后一个组件并更新所有其他组件更有意义。

¥One way to fix it would be to make emoji a $derived value. But it makes more sense to remove the first <Thing> component altogether rather than remove the last one and update all the others.

为此，我们为 each 块的每次迭代指定一个唯一键：

¥To do that, we specify a unique key for each iteration of the each block:

{#each things as thing (thing.id)}
	<Thing name={thing.name}/>
{/each}

你可以使用任何对象作为键，因为 Svelte 内部使用 Map - 换句话说，你可以使用 (thing) 而不是 (thing.id)。但是，使用字符串或数字通常更安全，因为这意味着身份即使没有引用相等性也能持续存在，例如在使用来自 API 服务器的新数据更新时。