技术问询：Keyed Each块能否使用组件属性值作为动态键？

当然可以！在Svelte的{#each ... as ... (key)}语法中，完全支持将组件属性的值作为动态键来使用，这在需要根据外部传入的配置来控制列表项更新逻辑的场景下非常实用。

举个简单的例子，假设我们有一个组件，接收items列表和一个keyField属性，用来指定用列表项的哪个字段作为唯一标识：

<script>
  // 外部传入的列表数据
  export let items;
  // 外部指定的键字段，比如'id'、'slug'等
  export let keyField;
</script>

{#each items as item (item[keyField])}
  <div class="list-item">
    <h3>{item.title}</h3>
    <p>{item.description}</p>
  </div>
{/each}

当使用这个组件时，你可以灵活指定键字段：

<ListComponent items={products} keyField="productId" />

注意事项 #

• 确保你传入的键值是唯一且稳定的，这样Svelte的diff算法才能准确识别列表项的变化，避免不必要的重新渲染。
• 如果keyField可能为undefined，可以添加默认值来避免错误：

  {#each items as item (item[keyField ?? 'id'])}
    <!-- 列表项内容 -->
  {/each}
  

• 你还可以结合组件属性和列表项的多个值生成复合键，比如分组场景：

  <script>
    export let currentGroup;
    export let items;
  </script>
  
  {#each items as item ([currentGroup, item.id])}
    <div>
      {item.name} - 所属分组: {currentGroup}
    </div>
  {/each}
  

  这种情况下，当currentGroup变化时，所有列表项的键都会更新，触发组件重新渲染，适合分组切换的场景。

总的来说，只要是能唯一标识列表项的动态值（不管来自组件属性还是其他响应式变量），都可以作为Keyed Each的键来使用，这也是Svelte列表渲染灵活性的体现。

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