Svelte 最新中文文档翻译（6）—— if、each、key、await 逻辑区块

前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

1. {#if expression}...{/if}

复制代码

1. {#if expression}...{:else if expression}...{/if}

复制代码

1. {#if expression}...{:else}...{/if}

复制代码

需要条件渲染的内容可以包装在 if 块中。

1. {#if answer === 42}
2.         <p>问题是什么？</p>
3. {/if}

复制代码

可以使用 {:else if expression} 添加额外的条件，最后可以选择性地以 {:else} 子句结束。

1. {#if porridge.temperature > 100}
2.         <p>太热了！</p>
3. {:else if 80 > porridge.temperature}
4.         <p>太冷了！</p>
5. {:else}
6.         <p>刚刚好！</p>
7. {/if}

复制代码

（块不必只包裹元素，它们也可以包裹元素内的文本。）

1. {#each expression as name}...{/each}

复制代码

1. {#each expression as name, index}...{/each}

复制代码

遍历值可以通过 each 块来完成。这些值可以是数组、类数组对象（即任何具有 length 属性的对象），或者可迭代对象如 Map 和 Set —— 换句话说，任何可以用 Array.from 处理的对象都可以。

1. <h1>购物清单</h1>
2. <ul>
3.         {#each items as item}
4.                 <li>{item.name} x {item.qty}</li>
5.         {/each}
6. </ul>

复制代码

each 块还可以指定一个 index，相当于 array.map(...) 回调中的第二个参数：

1. {#each items as item, i}
2.         <li>{i + 1}: {item.name} x {item.qty}</li>
3. {/each}

复制代码

带键的 each 块

1. {#each expression as name (key)}...{/each}

复制代码

1. {#each expression as name, index (key)}...{/each}

复制代码

如果提供了一个 key 表达式（必须能唯一标识每个列表项），当数据发生变化时，Svelte 将使用它对列表进行差异比较，而不是在末尾添加或删除条目。key 可以是任何对象，但建议使用字符串和数字，因为它们允许在对象本身发生变化时保持标识继续存在。

1. {#each items as item (item.id)}
2.         <li>{item.name} x {item.qty}</li>
3. {/each}
6. {#each items as item, i (item.id)}
7.         <li>{i + 1}: {item.name} x {item.qty}</li>
8. {/each}

复制代码

你可以在 each 块中自由使用解构和剩余模式。

1. {#each items as { id, name, qty }, i (id)}
2.         <li>{i + 1}: {name} x {qty}</li>
3. {/each}
5. {#each objects as { id, ...rest }}
6.         <li>{id}<MyComponent {...rest} /></li>
7. {/each}
9. {#each items as [id, ...rest]}
10.         <li>{id}<MyComponent values={rest} /></li>
11. {/each}

复制代码

不带条目的 each 块

1. {#each expression}...{/each}

复制代码

1. {#each expression, index}...{/each}

复制代码

如果你只是想渲染某些内容 n 次，可以省略 as 部分（demo）：

1.         {#each { length: 8 }, rank}
2.                 {#each { length: 8 }, file}
3.                        
4.                 {/each}
5.         {/each}

复制代码

Else 块

1. {#each expression as name}...{:else}...{/each}

复制代码

each 块还可以有一个 {:else} 子句，当列表为空时会渲染该子句。

1. {#each todos as todo}
2.         <p>{todo.text}</p>
3. {:else}
4.         <p>今天没有任务！</p>
5. {/each}

复制代码

1. {#key expression}...{/key}

复制代码

当表达式的值发生变化时，Key 块会销毁并重新创建其内容。当用在组件时，这将导致组件被重新实例化和重新初始化：

1. {#key value}
2.         <Component />
3. {/key}

复制代码

如果你想要在值发生变化时播放过渡效果，这也很有用：

1. {#key value}
2.         {value}
3. {/key}

复制代码

1. {#await expression}...{:then name}...{:catch name}...{/await}

复制代码

1. {#await expression}...{:then name}...{/await}

复制代码

1. {#await expression then name}...{/await}

复制代码

1. {#await expression catch name}...{/await}

复制代码

Await 块允许你根据 Promise 的三种可能状态 — 等待中（pending）、已完成（fulfilled）或已拒绝（rejected） — 进行分支处理。

1. {#await promise}
2.        
3.         <p>等待 promise 解决中...</p>
4. {:then value}
5.        
6.         <p>值是 {value}</p>
7. {:catch error}
8.        
9.         <p>出现错误: {error.message}</p>
10. {/await}

复制代码

[!NOTE] 在服务端渲染期间，只会渲染等待中分支。
如果提供的表达式不是一个 Promise，则只会渲染 :then 分支，包括在服务端渲染期间。

如果你不需要在 promise 被拒绝时渲染任何内容（或不可能出现错误），可以省略 catch 块。

1. {#await promise}
2.        
3.         <p>等待 promise 解决中...</p>
4. {:then value}
5.        
6.         <p>值是 {value}</p>
7. {/await}

复制代码

如果你不关心等待状态，你也可以省略初始块。

1. {#await promise then value}
2.         <p>值是 {value}</p>
3. {/await}

复制代码

同样，如果你只想显示错误状态，你可以省略 then 块。

1. {#await promise catch error}
2.         <p>错误是 {error}</p>
3. {/await}

复制代码

[!NOTE] 你可以将 #await 和 import(...) 一起使用实现组件懒加载：

1. {#await import('./Component.svelte') then { default: Component }}
2.         <Component />
3. {/await}

复制代码

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！