基于 Svelte 选择的主/细节未正确更新

Question

请耐心等待，Svelte 新手问题来了。

我有一个基于选择的主视图/详细 View ，如下面的简化版本:

<script>
    let data = [{ x: 10},{ x: 20},{ x:30}]
    let selected = data[1];
</script>
<table>
    {#each data as row}
      <tr>
            <button class="{selected === row ? 'selected' : ''}"
                            on:click={() => selected = row}>Select</button>
             <td><input type="number" bind:value={row.x}/></td>
        </tr>
    {/each}
</table>

<br/><br/>
Detail: <input type="number" bind:value={selected.x}/>

<style>
    .selected { background-color: #ff3e00; color: white; }
</style>

如果您选择不同的行(详细信息随所选行更新)，这将正常工作。然而不幸的是，如果更改了顶部列表中所选项目的值，则 Detail 不会更新。此外，如果更改详细信息，则列表项值不会更新。旁注:如果您更改列表值，然后选择不同的项目并切换回来，详细信息 View 会显示正确的值。

为了修复它，我切换到基于索引的选择:

<script>
    let data = [{ x: 10},{ x: 20},{ x:30}]
    let selectedIndex = 1;
    $: selected = data[selectedIndex];
</script>
<table>
    {#each data as row, i}
      <tr>
            <button class="{selectedIndex === i ? 'selected' : ''}"
                            on:click={() => selectedIndex = i}>Select</button>
             <td><input type="number" bind:value={row.x}/></td>
        </tr>
    {/each}
</table>

<br/><br/>
Detail: <input type="number" bind:value={selected.x}/>


<style>
    .selected { background-color: #ff3e00; color: white; }
</style>

我想不通的是为什么第一个版本不行？我缺少什么魔法？此外，为什么第二个版本修复了它？在我看来，两者的行为应该相同。

我真的很喜欢 Svelte，但在我投入大量资金之前，我需要知道它确实能正确处理所有反应式更新。

Answer 1

Svelte 不知道 row.x 和 selected.x 可能指的是同一个东西，这就是为什么第一个版本的代码不能像预期。

第二个版本只因为这个响应式(Reactive)语句才有效:

$: selected = data[selectedIndex];

对 row.x 的更改会使 data 无效，这会导致重新评估 react 语句，从而更新 selected.x。对 selected.x 的更改会传播到 row.x，因为 data 和 selectedIndex 在更改时无效，因为它们在 react 语句中使用。

本质上，响应式(Reactive)语句在 selected 和 data 之间建立了逻辑关系，否则 Svelte 编译器将看不到它。