Vue 3 中用 ref 管理表单多选与全选联动，应同时维护 selectedIds = ref(new Set()) 和 isAllSelected = ref(false) 两个响应式状态，通过 toggleItem 更新选中并同步全选状态，全选变化时批量赋值 Set，渲染时用 computed 缓存 isSelected 提升性能。
Vue 3 中用 ref 管理表单多选与全选联动，核心在于同步“所有选项是否被选中”和“当前已选 ID 列表”两个状态，避免手动遍历比对。
用 ref 同时维护已选项与全选状态
不要只存一个 selectedIds，再每次计算全选是否勾上——这样在数据量大或频繁触发时容易卡顿。推荐用两个 ref 显式管理：
-
selectedIds = ref(new Set())：用Set存 ID，去重快、增删 O(1) -
isAllSelected = ref(false)：单独控制全选 checkbox 的绑定值
两者通过逻辑保持一致：当 selectedIds.size === totalItems.length 时设为 true；清空或取消全选时重置 selectedIds 为新空 Set。
点击单个选项时更新选中状态
每个选项的 @change 或 @click 处理函数里，统一用 toggle 操作：
- 存在则
delete，不存在则add - 接着根据新 size 更新
isAllSelected.value
示例代码片段：
const toggleItem = (id) => {
if (selectedIds.value.has(id)) {
selectedIds.value.delete(id);
} else {
selectedIds.value.add(id);
}
isAllSelected.value = selectedIds.value.size === totalItems.length;
};
全选 checkbox 变化时批量同步
全选框绑定 v-model="isAllSelected"，其 change 回调只需两步：
- 若勾选 → 清空
selectedIds.value并填入全部 ID（可用new Set(totalIds)） - 若取消 → 直接赋值为空
new Set()
注意：不要在回调里直接修改 selectedIds.value = ... 后再手动触发更新，ref 值变更本身就会触发响应式更新。
渲染时用 computed 保证视图准确
模板中判断某项是否选中，别写 selectedIds.value.has(item.id) ——虽然可行，但每次渲染都调用 has 不如用计算属性缓存：
然后在 v-for 里用 :checked="isSelected(item.id)"，既语义清晰，又利于 Vue 优化依赖追踪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
