Svelte 的响应式系统不自动追踪 Set 等可变对象的内部变更，需通过显式赋值触发更新；直接调用 selected.add() 或 selected.delete() 不会通知模板重渲染，必须配合 selected = selected 这类“自赋值”操作激活响应链。
svelte 的响应式系统不自动追踪 set 等可变对象的内部变更，需通过显式赋值触发更新；直接调用 `selected.add()` 或 `selected.delete()` 不会通知模板重渲染，必须配合 `selected = selected` 这类“自赋值”操作激活响应链。
在 Svelte 中，响应式更新并非基于运行时代理监听（如 Vue 3 的 Proxy）或脏检查（如 Angular），而是依赖编译器对赋值语句（=）的静态分析。这意味着：只有当一个被导出（export let）或声明（let）的顶层变量发生直接赋值时，Svelte 才会标记其所有依赖表达式（如 class:tr-selected={selected.has(...)}）为需重新求值。
而 Set 是一个可变集合对象——selected.add(id) 和 selected.delete(id) 仅修改其内部状态，不改变 selected 变量本身的引用，因此编译器无法感知变化，模板中的 class:tr-selected 也就不会重新计算，导致视觉高亮“卡死”。
✅ 正确解法：用“自赋值”触发响应式更新
最简洁、推荐的方式是在修改 Set 后执行一次无副作用的赋值操作：
<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>
⚠️ 注意事项：
- selected = selected 并非冗余操作，而是 Svelte 响应式系统的“信号开关”——它告诉编译器：“这个变量已被写入，请重新评估所有依赖它的地方”；
- 不要使用 selected = new Set(selected)，虽然也能触发更新，但会创建新实例，可能破坏跨组件共享状态（如通过 store 传递时）；
- 若需频繁操作且逻辑复杂，可封装为工具函数提升可读性：
function updateSet<t>(set: Set<t>, mutator: (s: Set<t>) => void): void {
mutator(set);
set = set; // 触发响应
}
// 使用示例
updateSet(selected, s => s.has(id) ? s.delete(id) : s.add(id));</t></t></t>
? 进阶建议：面向未来的替代方案
若项目规模增长或需跨组件同步选中状态，建议升级为 Svelte Store（如 writable）管理 selected：
import { writable } from 'svelte/store';
const selectedStore = writable<set>>(new Set());
// 在组件内订阅并更新
$: $selectedStore; // 自动响应
function toggle(id) {
selectedStore.update(s => {
if (s.has(id)) s.delete(id);
else s.add(id);
return s; // 必须返回新 Set 或原引用（store 会 diff）
});
}</set>
此时无需手动 = selected，因为 store.update() 内部已触发响应式通知。
总结：Svelte 的“响应式哲学”是显式优于隐式。避免将可变对象（Set、Map、普通对象属性）作为响应式状态的核心载体；要么用自赋值兜底，要么改用天然响应式的结构（如数组索引、简单布尔/字符串变量），或交由 store 统一管理——这既是最佳实践，也是写出可维护 Svelte 应用的关键前提。
