Svelte中bind:checked双向绑定无法通过代码更新复选框状态问题

我有一个包含name和selected两个属性的对象数组，希望点击按钮时能选中/取消选中所有复选框。复选框通过bind:checked绑定到对象的selected属性，但点击按钮调用toggle函数后，虽然对象的selected属性已更新，复选框状态却没有同步。示例代码如下：

<script>
    let agrumes = [
        {name: "Citron", selected: false},
        {name: "Orange", selected: false},
        {name: "Pamplemousse", selected: false}
    ]
    
    function toggle() {
        agrumes.forEach(element => {
            element.selected = !element.selected;
        });     
        console.log(agrumes);
    }   
</script>

<button on:click={() => toggle()}>Click me</button>
<br />

{#each agrumes as agrume}
<input type="checkbox" id="{agrume.name}" bind:checked={agrume.selected}/>
<label for="{agrume.name}">{agrume.name}</label>
{/each}

核心原因是Svelte的响应式系统默认不会追踪对象内部属性的修改，必须通过特定方式触发更新。以下是三种可行的解决办法：

方法一：重新赋值数组触发响应 #

修改toggle函数，在更新完所有对象的selected属性后，重新给数组赋值，让Svelte感知到数组的变化：

function toggle() {
    agrumes.forEach(element => {
        element.selected = !element.selected;
    });     
    // 重新赋值数组，触发响应式更新
    agrumes = agrumes;
    console.log(agrumes);
}

方法二：使用$set更新对象属性 #

引入Svelte的$set方法，直接修改对象属性，让Svelte追踪到属性变更：

import { $set } from 'svelte';

function toggle() {
    agrumes.forEach(element => {
        $set(element, 'selected', !element.selected);
    });     
    console.log(agrumes);
}

方法三：创建新数组（不可变更新） #

通过map方法生成一个全新的数组，每个对象都是包含更新后selected属性的副本，这种不可变更新的方式也能触发响应式：

function toggle() {
    agrumes = agrumes.map(element => ({
        ...element,
        selected: !element.selected
    }));
    console.log(agrumes);
}

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