Svelte 的响应式系统不自动追踪 Set 或 Map 等集合对象的内部方法调用（如 .add()、.delete()），因此直接修改 selected.has(id) 的结果虽为 true，但模板不会重渲染——需通过赋值触发响应式更新。

svelte 的响应式系统不自动追踪 set 或 map 等集合对象的内部方法调用（如 `.add()`、`.delete()`），因此直接修改 `selected.has(id)` 的结果虽为 `true`，但模板不会重渲染——需通过赋值触发响应式更新。

在 Svelte 中，响应式更新仅由顶层变量的赋值语句（variable = newValue）触发，而非对象内部状态变更。你代码中使用的 Set 是一个可变集合，其 .add() 和 .delete() 方法仅修改自身内部结构，Svelte 编译器无法静态分析这类操作与模板中 selected.has(row[key]) 的依赖关系，因此即使 selected.has(...) 运行时返回 true，class:tr-selected 也不会重新求值。

✅ 正确解决方案：显式触发响应式更新
最简洁可靠的方式是执行一次“自赋值”（self-assignment），即 selected = selected;。该语句虽未改变实际值，但被 Svelte 视为对 selected 变量的写入操作，从而强制使所有依赖 selected 的表达式（包括 selected.has(...)）重新计算：

<script lang="ts">
    type ObjectKey = keyof any;
    export let data: any[] = [];
    export let key = 'id' as ObjectKey;
    let selected: Set<ObjectKey> = new Set<ObjectKey>();

    function toggle(id: ObjectKey) {
        if (selected.has(id)) {
            selected.delete(id);
        } else {
            selected.add(id);
        }
        selected = selected; // ✅ 关键：触发响应式更新
    }
</script>

{#each Object.keys(data[0]) as heading} {/each} {#each data as row} toggle(row[key])}> {#each Object.values(row) as cell} {/each} {/each}

{heading}

{cell}

⚠️ 注意事项：

Dataify

一款AI开发辅助工具，主要用于提供数据采集API、高质量数据集、代理服务、AI Token一体化供应，适合需要提升相关任务效率的用户。

下载

• 不要依赖 Object.values(data)：data 是数组，应直接遍历 data（即 {#each data as row}），否则可能因 Object.values([]) 返回空数组导致渲染异常；
• !important 用于确保选中样式优先级高于 :hover：若未加，鼠标悬停时绿色背景可能被红色覆盖；
• 替代方案（进阶）：若需更清晰的状态管理，可改用普通数组或布尔映射对象（如 let selectedIds: ObjectKey[] = []），配合 selectedIds.includes(row[key])，再通过 selectedIds = [...selectedIds] 更新——同样依赖赋值驱动；
• 避免滥用 selected = selected：它虽有效，但属于“响应式提示”，非真正数据变更；长期项目建议结合 $derived（Svelte 5）或封装为 store 提升可维护性。

总结：Svelte 的响应式不是基于运行时代理监听，而是编译期静态分析赋值行为。任何非赋值引发的状态变更（Set/Map 方法、类实例属性直改、数组 push() 等），都必须辅以显式赋值才能同步到 UI。掌握这一设计哲学，是写出高效、可预测 Svelte 组件的关键前提。