在 svelte 中，可通过 `#each` 块结合 `slice()` 方法或索引条件判断，轻松实现只渲染数组的前 n 个元素，无需额外状态管理或复杂逻辑。
Svelte 提供了简洁高效的响应式列表渲染机制，限制数组显示数量有两种主流且推荐的方式：预过滤（推荐） 和 条件渲染（灵活但稍冗余）。
✅ 推荐方式：使用 slice() 预截取数组
最清晰、性能更优的做法是在 #each 中直接对原数组调用 .slice(0, N)，生成一个新子数组进行遍历。该方法语义明确、无副作用（不修改原数组），且 Svelte 能高效追踪其响应式更新：
{#each data.slice(0, 4) as person}
{person.name}
{/each}? 提示：slice(0, 4) 返回索引 0 到 3 的元素（共 4 个），安全兼容空数组或长度不足 4 的情况，不会报错。
⚠️ 备选方式：在 #each 内部用 {#if index
虽然可行，但每次遍历所有元素再逐个判断，对大数组存在轻微性能开销；适合需动态控制（如结合 index % 2 === 0 等复杂逻辑）的场景：
{#each data as person, index}
{#if index < 4}
{person.name}
{/if}
{/each}? 注意事项
- ❌ 避免使用 data.splice(0, 4) —— 它会原地修改原数组，破坏响应式数据一致性；
- ✅ 若需动态控制数量（如用户切换“显示 3/6/全部”），建议将限制数设为可响应式变量：
let limit = 4; // … {#each data.slice(0, limit) as person} - ? 所有方式均天然支持响应式：当 data 更新时，视图自动重渲染对应数量的项。
综上，优先使用 data.slice(0, N) 是 Svelte 中限制数组渲染的简洁、安全、高性能实践。
