vue 3 中用 computed 实现全选反选联动，核心是定义含 get/set 的 allchecked 计算属性：get 判断是否全选，set 批量更新 selected；加 isindeterminate 支持半选视觉；反选用独立方法 toggleall()，自动触发 allchecked 重算。
Vue 3 中用 computed 实现全选与反选联动，核心是把“全选状态”定义为派生值，由已选项数量和总项数动态决定，同时支持 get 和 set 双向同步 —— 不改原始数据结构，不依赖 watch，逻辑清晰且响应式可靠。
定义全选计算属性（含 get/set）
用对象写法声明 allChecked，get 判断是否全选，set 批量更新每项的选中状态：
-
get：返回
list.every(item => item.selected)，即所有子项都为 true 才算全选 -
set(val)：遍历
list，统一赋值item.selected = val - 注意：必须确保
list中每个对象的selected是响应式属性（如用ref或reactive初始化）
支持半选状态（indeterminate）
仅靠布尔值不够直观。加一个 isIndeterminate 计算属性，控制 checkbox 的中间横线视觉效果：
- 当
selectedCount > 0且selectedCount 时返回 <code>true - 在模板中绑定到
<input type="checkbox">的:indeterminate属性 -
selectedCount可用computed(() => list.filter(i => i.selected).length)获取
配合反选功能（非 computed，但需联动）
反选不是计算属性的职责，而是独立方法，但要与 allChecked 保持一致：
- 写一个
toggleAll()方法，遍历list，对每个item.selected取反 - 执行后，
allChecked.value会自动重算（因为依赖的list响应式字段变了） - 如果用了
ref(new Set())管理 ID，反选就改为：清空 Set 后再把未选中的 ID 加进去
避免常见坑
几个容易出错的关键点：
- 不要直接在
set里修改list引用（比如list = []），这会破坏响应式；只改内部属性 - 若
list来自 API，确保初始化时每个 item 都有selected: ref(false)或用reactive({ selected: false }) - 不用
watch监听子项变化来更新全选状态 ——get已天然响应，watch 是冗余且易错的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
