Svelte表单嵌套对象绑定优化：如何用解构简化代码？

方式1：使用{#set}块（Svelte 3.48+） #

{#set}块可以在局部作用域内解构对象属性，并且自动同步回原对象，无需手动写同步逻辑：

<script>
  let form = {
    fields: [
      { name: 'username', value: '' },
      { name: 'email', value: '' }
    ]
  };

  function deleteField(index) {
    form.fields.splice(index, 1);
  }
</script>

{#each form.fields as f, index}
  <div>
    {#set { name, value } = f}
      <input bind:value placeholder={name}>
      <button on:click={() => deleteField(index)}>删除</button>
    {/set}
  </div>
{/each}

块内的value会和原对象的f.value自动双向同步，输入框修改内容会直接更新form.fields里的对应项。

方式2：拆分字段为子组件 #

把单个字段的逻辑抽成独立子组件，传递整个field对象作为props，子组件内部直接绑定属性，彻底避免父组件里的f.引用：

Field.svelte #

<script>
  export let field;
  export let onDelete;
</script>

<input bind:value={field.value} placeholder={field.name}>
<button on:click={onDelete}>删除</button>

父组件 #

<script>
  import Field from './Field.svelte';
  let form = {
    fields: [
      { name: 'username', value: '' },
      { name: 'email', value: '' }
    ]
  };

  function deleteField(index) {
    form.fields.splice(index, 1);
  }
</script>

{#each form.fields as f, index}
  <Field {field} onDelete={() => deleteField(index)} />
{/each}

这种方式不仅简化写法，还让代码更模块化，后续字段逻辑复杂时更易维护。

方式3：手动反应式同步（兼容旧版Svelte） #

如果无法使用{#set}，可以手动解构后用反应式语句同步回原对象：

<script>
  let form = {
    fields: [
      { name: 'username', value: '' },
      { name: 'email', value: '' }
    ]
  };

  function deleteField(index) {
    form.fields.splice(index, 1);
  }
</script>

{#each form.fields as f, index}
  <div>
    {#let { name, value } = f}
      <input bind:value placeholder={name}>
      <button on:click={() => deleteField(index)}>删除</button>
      $: f.value = value;
    {/let}
  </div>
{/each}

通过$:反应式语句，将修改后的value同步回f.value，实现双向绑定效果。

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