Svelte中使用unshift向数组添加元素时，如何避免子组件onMount重复触发

嗨，这个问题我之前在项目里也踩过坑！其实根源在于Svelte的each块默认是靠数组索引来识别组件身份的。当你用unshift往数组开头插入新元素时，原来所有元素的索引都往后移了一位——在Svelte眼里，这些旧元素的“身份标识”变了，所以它会把所有旧组件销毁再重新创建一遍，自然就触发了所有组件的onMount钩子。

而用push的时候，原有元素的索引完全没变化，Svelte能认出它们是之前的组件，所以只会新增末尾的那个，旧组件的状态和生命周期都不受影响。

那怎么解决呢？最靠谱的办法就是给each块指定唯一的key值，让Svelte通过这个key来追踪组件，而不是依赖索引。具体步骤是：

1. 给你的组件数组里的每一项添加一个唯一标识（比如自增的id、UUID之类的），比如把原来的数组结构从：

   let components = [
     { type: ComponentA },
     { type: ComponentB }
   ]
   

   改成：

   let components = [
     { id: 1, type: ComponentA },
     { id: 2, type: ComponentB }
   ]
   

2. 在each块里加上这个key，写法是在循环项后面加(item.id)：

   {#each components as component (component.id)}
     <svelte:component this={component.type} />
   {/each}
   

这样一来，不管你是unshift还是在数组中间插入元素，Svelte都会通过id来识别每个组件的身份——只要id不变，组件就不会被重新创建，onMount自然也不会重复触发，新添加的组件才会执行自己的onMount。

另外还要注意，如果你的组件有内部状态，最好把状态和数组项绑定起来（比如给每个数组项加个state属性，组件内部通过bind:或者props接收），这样状态会跟着数组项走，就算顺序变了也不会丢失。

备注：内容来源于stack exchange，提问作者Lenny