默认情况下，当你修改 each 块的值时，它将在块末尾添加和删除 DOM 节点，并更新任何已更改的值。这可能不是你想要的。

¥By default, when you modify the value of an each block, it will add and remove DOM nodes at the end of the block, and update any values that have changed. 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 值，但不会更新表情符号。

   ¥It then updates the name value in the remaining DOM nodes, but not the emoji.

如果你来自 React，这可能看起来很奇怪，因为你习惯于在状态更改时重新渲染整个组件。Svelte 的工作方式不同：组件 ‘runs’ 一次，后续更新为 ‘fine-grained’。这可以使事情更快，并为你提供更多控制权。

¥[!NOTE] If you’re coming from React, this might seem strange, because you’re used to the entire component re-rendering when state changes. Svelte works differently: the component ‘runs’ once, and subsequent updates are ‘fine-grained’. This makes things faster and gives you more control.

一种修复方法是将 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 服务器的新数据进行更新时。

¥[!NOTE] You can use any object as the key, as Svelte uses a Map internally — in other words you could do (thing) instead of (thing.id). Using a string or number is generally safer, however, since it means identity persists without referential equality, for example when updating with fresh data from an API server.