svelte 的响应式系统不自动追踪 set 等可变对象的内部变更；即使 selected.has(id) 返回 true，class:tr-selected 也不会更新，必须通过显式赋值（如 selected = selected）触发依赖重计算。
svelte 的响应式系统不自动追踪 set 等可变对象的内部变更；即使 selected.has(id) 返回 true，class:tr-selected 也不会更新，必须通过显式赋值（如 selected = selected）触发依赖重计算。
在 Svelte 中，响应式更新的核心机制是基于赋值语句的静态编译时分析，而非运行时劫持或 Proxy 监听。这意味着：只有当一个被导出（export let）或声明在顶层作用域的变量被重新赋值（即 variable = newValue）时，Svelte 才会自动标记所有依赖该变量的表达式（如 class:tr-selected={selected.has(row[key])}）为“需重新求值”。
而 Set.prototype.add() 和 Set.prototype.delete() 是原地修改操作——它们不改变 selected 变量本身的引用，仅修改其内部状态。Svelte 编译器无法在编译期识别这类方法调用与响应式依赖的关系，因此不会将 <tr class:tr-selected={selected.has(...)} 关联到 selected 的变更上。这就是为什么控制台显示 selected.has(row[key]) === true，但 DOM 却未应用 .tr-selected 类的原因。
✅ 正确解决方案：强制触发响应式更新
最简洁、符合 Svelte 设计哲学的做法，是在修改 Set 后执行一次“无意义但有效”的赋值操作，使 Svelte 检测到变量被写入：
<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>
<table>
<thead>
<tr>
{#each Object.keys(data[0]) as heading}
<th>{heading}</th>
{/each}
</tr>
</thead>
<tbody>
{#each data as row}
<tr
class:tr-selected={selected.has(row[key])}
on:click={() => toggle(row[key])}
>
{#each Object.values(row) as cell}
<td>{cell}</td>
{/each}
</tr>
{/each}
</tbody>
</table>
<style>
table, th, td {
border: 1px solid #ccc;
border-collapse: collapse;
margin-bottom: 10px;
}
tr:hover {
background-color: #ffebee;
cursor: pointer;
}
.tr-selected {
background-color: #c8e6c9 !important; /* 高亮绿色，优先级确保覆盖 hover */
}
</style>⚠️ 注意事项与进阶建议：
- 不要滥用 selected = selected：它虽有效，但属于“响应式 hack”。若逻辑复杂（如批量选中/取消），推荐改用响应式声明 $: isSelected = new Set(selected) 或更清晰的状态建模（例如用 Map 或普通对象 selected: Record<string, boolean>）。
- 避免 Object.values(data) 的误用：data 是数组，Object.values(data) 会返回 [data[0], data[1], ...] —— 功能上等价于 data，但语义冗余且易误导；应直接 {#each data as row}。
- 类型安全增强：key 默认为 'id'，但若传入非字符串字面量（如 key={col}），需配合 as const 或泛型约束防止运行时错误。
- 性能考量：selected = selected 触发全量重渲染；对超大表格（>1000 行），可结合 bind:this + classList.toggle() 做局部 DOM 操作优化，但需放弃声明式优势，一般场景不推荐。
总结：Svelte 的响应式不是“魔法”，而是“约定优于配置”。理解其“赋值即响应”的设计前提，是写出可维护、高性能 Svelte 应用的关键。与其绕过响应式系统手动操作 DOM，不如顺应它——用简单赋值，换清晰逻辑与可靠更新。
