Svelte是否有专属解构赋值语法？现有#each写法合规及优化方案？

首先，你用{#each [item]}来实现模板内解构的写法是可行的，能正常运行并达到解构目的，但这种方式属于“hack”用法——{#each}的设计初衷是遍历数组/可迭代对象，为了解构强行把单个值包装成数组，语义上不太贴合，也可能带来微小的不必要渲染逻辑开销。

更简洁且语义化的实现方式有两种：

1. 在脚本块中做响应式解构 #

如果需要解构的变量是响应式的（比如item会动态更新），可以在<script>里用响应式声明自动同步解构结果：

<script>
  export let item;
  // 响应式解构，item更新时自动重新解构
  $: ({ aaa, bbb, ccc: { ddd, eee } } = item);
</script>

<div>{ aaa }</div>
<div>{ bbb }</div>
<div>
  <div>{ ddd }</div>
  <div>{ eee }</div>
</div>

如果item是静态不会变化的，直接写普通解构即可，不用加$:。

2. 使用模板内的{#let}语法（推荐） #

Svelte 3.47及以上版本支持{#let}模板语法，专门用于在模板内声明变量，包括直接解构对象，完全匹配你想要的“仅用于解构赋值”的场景，语义清晰且写法简洁：

{#let { aaa, bbb, ccc: { ddd, eee } } = item}
  <div>{ aaa }</div>
  <div>{ bbb }</div>
  <div>
    <div>{ ddd }</div>
    <div>{ eee }</div>
  </div>
{/let}

这种方式既不用修改脚本逻辑，也无需借助{#each}的遍历能力，是最贴合需求的方案。

内容的提问来源于stack exchange，提问作者enoeht