Svelte 模板渲染逻辑详解：插值、if/else、each 列表与 Await 异步块

Svelte 的模板语法非常精简：变量用一对花括号插值，条件和列表都有独立语句块，异步操作也有专门的 Await 块。下面按使用顺序梳理核心写法。

变量插值

在 Svelte 中渲染变量，使用大括号 {} 插值。

<script>
  let name = 'Tony';
</script>

<div>{name}</div>

if / else 条件渲染

要在模板中渲染条件语句，使用 {#if} 语句块，它的语法如下：

{#if condition}
  <div>...</div>
{/if}

举个例子：

<script>
  let world = $state({
    mountainHasEdges: true,
    riverIsFlowing: true,
  });
</script>

{#if world.mountainHasEdges && world.riverIsFlowing}
  <div>我不能和你分手</div>
{/if}

有 if 的地方通常也离不开 else，这俩就像卧龙凤雏，经常成对出现。{:else} 块的语法如下：

{#if condition}
  <div>...</div>
{:else}
  <div>...</div>
{/if}

举例如下：

<script>
  let world = $state({
    mountainHasEdges: true,
    riverIsFlowing: true,
  });
</script>

{#if world.mountainHasEdges && world.riverIsFlowing}
  <div>我不能和你分手</div>
{:else}
  <div>我还是不能和你分手</div>
{/if}

语句块的三种形式

在 Svelte 语句块中，有三种类型：{#...} 开启语句块，{/...} 结束语句块，{:...} 继续当前语句块。正如上方的 {#if}、{:else}、{/if} 所示。

如果条件较多，可以使用 {:else if} 语句块。

<script>
  let world = $state({
    mountainHasEdges: true,
    riverIsFlowing: true,
  });
</script>

{#if world.mountainHasEdges && world.riverIsFlowing}
  <div>我不能和你分手</div>
{:else if world.mountainHasEdges}
  <div>我还是不能和你分手</div>
{:else}
  <div>剧终</div>
{/if}

each 列表渲染

如果要渲染列表，使用 {#each} 语句块。语法如下：

{#each list as item}
  <div>... {item} ...</div>
{/each}

比如：

<script>
  let cats = $state([
    '陈俊南',
    '乔家劲',
    '张丽娟',
    '李尚武',
    '钱多多',
    '周末',
  ]);
</script>

<h1>猫组织成员</h1>
{#each cats as cat}
  <div>{cat}</div>
{/each}

如果想访问元素在列表中的位置索引，在 as 后面使用第二个参数：

{#each cats as cat, i}
  <div>{i + 1}: {cat}</div>
{/each}

列表的 key

在 React 和 Vue 渲染列表时，为了正确识别每个元素，需要强制为每一个元素提供唯一的 key 值。如果不给，编译器会通过警告骚扰你。

Svelte 的 key 默认不是强制的。当你改变列表长度时，它会在列表尾部增加或删除元素，并原地修改已有元素的值。

如果列表纯展示用、无状态，这就够了，不需要 key。

什么时候才需要 key？当列表元素有内部状态，或者需要排序时，就需要通过 key 唯一标识每一个元素。

Svelte 在 as 后面用小括号 () 标识唯一键的取值。下面示例主要展示语法，实际使用时请确保 key 取值唯一。

<script>
  let cats = $state([
    { id: 1, name: '陈俊南' },
    { id: 1, name: '乔家劲' },
    { id: 1, name: '张丽娟' },
    { id: 1, name: '李尚武' },
    { id: 1, name: '钱多多' },
    { id: 1, name: '周末' },
  ]);
</script>

<h1>猫组织成员</h1>
{#each cats as cat (cat.id)} <!-- 键取自 id -->
  <div>{cat.id}: {cat.name}</div>
{/each}

Await 异步块

Svelte 还有一种专门处理异步操作 Await 块。它的参数是 promise 实例，可以根据 promise 的状态，渲染不同的界面。

Await 块的语法如下：

{#await promise}
  <p>此处渲染 pending 状态</p>
{:then value}
  <p>此处渲染 resolved 状态，value 是获取的值</p>
{:catch error}
  <p>此处渲染 rejected 状态，错误信息在 error 中</p>
{/await}

以上就是 Svelte 模板渲染中常见语句块的用法。更多前端开发经验与资源共享，欢迎到 云栈社区 交流。