Svelte 如何实现列表渲染与条件渲染？

1. 条件渲染

Svelte 使用 {#if} 标签进行条件渲染，根据表达式的真假决定某段界面是否显示，并可配合 {:else} 提供备选内容。相比在 JavaScript 中用逻辑运算符拼接界面，这种声明式写法更直观。

2. 列表渲染

列表渲染通过 {#each} 标签实现，遍历数组为每一项生成对应的界面结构。{#each} 支持为每一项指定键（key），帮助 Svelte 在数据增删时精确复用与更新 DOM 节点，避免不必要的重建。

3. 响应式联动

无论是条件还是列表渲染，其依赖的变量都应是响应式的（如由 $state 声明或由 store 提供）。当底层数据变化时，相关的界面片段会自动更新，无需手动调用渲染逻辑。