Svelte中如何监听单个属性变化而非整个对象变更

你的需求是实现两个互斥的复选框（选一个则另一个自动取消），同时保留全不选的可能性，且选项存储在同一个复杂对象中。当前代码单向生效的问题源于响应式语句的触发逻辑，可通过以下两种可靠方式解决：

方案一：使用on:change事件监听用户操作 #

直接监听复选框的点击事件，仅在用户勾选选项时取消另一个，逻辑清晰且避免响应式更新顺序问题：

<script>
    let object = {a: false, b: false};
</script>

<label for="a">a</label>
<input 
    type="checkbox" 
    bind:checked={object.a} 
    id="a"
    on:change={(e) => {
        // 仅当勾选a时，取消b
        if (e.target.checked) object.b = false;
    }}
>

<label for="b">b</label>
<input 
    type="checkbox" 
    bind:checked={object.b} 
    id="b"
    on:change={(e) => {
        // 仅当勾选b时，取消a
        if (e.target.checked) object.a = false;
    }}
>

方案二：修正响应式语句逻辑 #

如果偏好使用Svelte的响应式声明，可明确判断属性变为true的时机，避免依赖&&的隐式判断导致的触发问题：

<script>
    let object = {a: false, b: false};

    // 当a被勾选时，取消b
    $: if (object.a) {
        object.b = false;
    }

    // 当b被勾选时，取消a
    $: if (object.b) {
        object.a = false;
    }
</script>

<label for="a">a</label>
<input type="checkbox" bind:checked={object.a} id="a">

<label for="b">b</label>
<input type="checkbox" bind:checked={object.b} id="b">

为什么原代码单向失效？ #

原代码中$: object.b && bActivated()的写法，当勾选b时，object.b变为true触发函数，但函数修改object.a为false后，Svelte的响应式批量更新可能导致object.b的状态未被正确同步到DOM。两种方案均规避了这个问题：方案一直接绑定用户操作，方案二明确了触发条件的优先级。

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