面试题：Svelte中each块渲染时如何跟踪每个元素状态

Question

在Svelte中使用each块进行列表渲染，假设有一个包含多个任务的数组，每个任务有完成状态字段。请描述如何在each块渲染时，能方便地跟踪每个任务的完成状态，并在任务完成状态改变时，正确更新视图。

Answer 1

1. 数据结构定义： 假设我们有一个任务数组tasks，每个任务对象包含id（唯一标识）和completed（完成状态）字段，例如：

let tasks = [
    { id: 1, completed: false, name: '任务1' },
    { id: 2, completed: true, name: '任务2' },
    { id: 3, completed: false, name: '任务3' }
];

2. 使用each块进行列表渲染： 在Svelte组件中，使用each块来渲染任务列表，并通过bind:checked来双向绑定任务的完成状态。each块的第二个参数是当前迭代项的唯一标识，这里使用任务的id。

<script>
    let tasks = [
        { id: 1, completed: false, name: '任务1' },
        { id: 2, completed: true, name: '任务2' },
        { id: 3, completed: false, name: '任务3' }
    ];
</script>

<ul>
    {#each tasks as task, index (task.id)}
        <li>
            <input type="checkbox" bind:checked={task.completed}>
            {task.name}
        </li>
    {/each}
</ul>

3. 状态改变时更新视图： 当用户点击复选框时，bind:checked会自动更新task.completed的值。由于Svelte的响应式系统，一旦数据发生变化，相关的DOM部分会自动重新渲染，从而正确更新视图。

这样就可以在each块渲染时方便地跟踪每个任务的完成状态，并在状态改变时正确更新视图。