Svelte表单编辑单个球员时为何全部球员组件重渲染？

我首次用Svelte（及Kit）做新项目，遇到一个问题：编辑表单里的某一名球员时，所有球员对应的组件都会重新渲染。哪怕添加了6名球员，只要编辑其中一个，全部组件都会触发重渲染。

这是为什么？我的预期（只有正在编辑的球员组件重渲染）有误吗？

相关代码 #

App.svelte #

<script>
    import FormPlayer from './FormPlayer.svelte';
    
    let form = {};
    
    if (!form.players?.length) AddPlayer();
    
    function AddPlayer() {
        form.players = [...(form.players || []), {id: Date.now().toString()}];
    }
    
    function DeletePlayer(e) {
        const deletedId = e.currentTarget.getAttribute('data-id');
        if (!deletedId) return;
        form.players = form.players?.filter((p) => p.id !== deletedId);
    }

    $: average_age = (form.players?.reduce((sum, r) => sum + (r.age || 0), 0) ?? 0) / (form.players?.length || 0);
    
    function submit() {
        console.log("form:", form);
    }
</script>

<form on:submit|preventDefault={() => submit(form)}>
    <div>
        <div>
            <label for="name">Team name</label>

            <input type="name" id="name" bind:value={form.name} />
        </div>

        <!-- <div>
            <SelectCoach required bind:id={form.coachId} />
        </div> -->
    </div>

    <br />

    <div>
        <ul>
            {#each form.players || [] as player (player.id)}
                <FormPlayer bind:player {DeletePlayer} />
                <br />
            {:else}
                <h3>Still no player</h3>
            {/each}
        </ul>
    </div>

    <button type="button" on:click={AddPlayer}>Add new player</button>

    <br /><br />

    <div>
        Average age of players: {average_age}
    </div>

    <button type="submit">Submit</button>
</form>

FormPlayer.svelte #

<script lang="ts">
    export let DeletePlayer;
    export let player;

    $: console.log('Inside FormPlayer.svelte:', player);
</script>

<li>
    <div>
        <label for="name">Player Name</label>

        <input type="text" bind:value={player.name} />
    </div>

    <div>
        <label for="age">Age</label>

        <input type="number" bind:value={player.age} />
    </div>

    <button on:click={DeletePlayer} data-id={player.id}>Remove player</button>
</li>

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