Svelte中{#each}块添加元素至首位却显示在末尾的问题排查

核心问题 #

你遇到的现象是由两个关键问题导致的：

1. {#each}未指定唯一key：Svelte的{#each}默认通过数组位置复用DOM节点，无法识别元素的顺序变化；
2. ListItem组件缺少响应式更新：组件内的ids变量仅在初始化时赋值一次，后续父组件传入的data变化时不会自动重新计算。

具体解释 #

当你往数组头部添加新元素后，控制台打印的数组确实是新元素在前，但因为没有给{#each}设置key，Svelte会按以下逻辑处理DOM：

• 复用原有两个ListItem组件，将新数组的前两个元素（新元素、原第一个元素）分别传入这两个组件；
• 新增第三个ListItem组件，传入原第二个元素。
  但由于ListItem里的ids没有响应式声明，组件不会更新内容，导致原有组件依然显示旧内容，新增的第三个组件显示新元素的内容，看起来就像新元素被加到了末尾。

修复步骤 #

1. 给{#each}添加唯一key

修改App.svelte中的循环代码，为每个元素指定唯一标识作为key（这里用每个item的id数组序列化后的值）：

{#each list as item (JSON.stringify(item.id))}
    <ListItem data={item}/>
{/each}

添加key后，Svelte会根据key匹配元素，正确将新元素插入到DOM顶部。

2. 让ListItem的ids变为响应式

修改listItem.svelte的脚本部分，用Svelte的响应式声明$:监听data的变化：

<script>
export let data = {};
$: ids = data.id?.join(' ') || '';
</script>

<div>
    {ids}
</div>

这样当父组件传入的data变化时，ids会自动重新计算并更新显示内容。

内容的提问来源于stack exchange，提问作者Peter