在 svelte 中，可通过 `#each` 块结合 `slice()` 方法或索引条件判断，轻松实现只渲染数组的前 n 个元素，无需额外状态管理或复杂逻辑。

Svelte 提供了简洁高效的响应式列表渲染机制，限制数组显示数量有两种主流且推荐的方式：预过滤（推荐） 和 条件渲染（灵活但稍冗余）。

✅ 推荐方式：使用 slice() 预截取数组

最清晰、性能更优的做法是在 #each 中直接对原数组调用 .slice(0, N)，生成一个新子数组进行遍历。该方法语义明确、无副作用（不修改原数组），且 Svelte 能高效追踪其响应式更新：

<script>
    let data = [
        { id: 1, name: 'John' },
        { id: 2, name: 'Peter' },
        { id: 3, name: 'Stev' },
        { id: 4, name: 'Clar' },
        { id: 5, name: 'Eyad' },
        { id: 6, name: 'Vector' }
    ];
</script>

{#each data.slice(0, 4) as person}
    <p>{person.name}</p>
{/each}

? 提示：slice(0, 4) 返回索引 0 到 3 的元素（共 4 个），安全兼容空数组或长度不足 4 的情况，不会报错。

⚠️ 备选方式：在 #each 内部用 {#if index < 4} 过滤

虽然可行，但每次遍历所有元素再逐个判断，对大数组存在轻微性能开销；适合需动态控制（如结合 index % 2 === 0 等复杂逻辑）的场景：

{#each data as person, index}
    {#if index < 4}
        <p>{person.name}</p>
    {/if}
{/each}

? 注意事项

• ❌ 避免使用 data.splice(0, 4) —— 它会原地修改原数组，破坏响应式数据一致性；
• ✅ 若需动态控制数量（如用户切换“显示 3/6/全部”），建议将限制数设为可响应式变量：

  let limit = 4;
  // …
  {#each data.slice(0, limit) as person}

• ? 所有方式均天然支持响应式：当 data 更新时，视图自动重渲染对应数量的项。

综上，优先使用 data.slice(0, N) 是 Svelte 中限制数组渲染的简洁、安全、高性能实践。