全选状态应由数据驱动，用computed实现isAllSelected响应式推导，或watch selectedIds（deep: true）同步更新；全选按钮点击时统一操作selectedIds数组，避免DOM操作干扰响应式。
在 Vue 表单开发中，watch 多选框的全选状态，核心不是“监听某个 checkbox”，而是监听选中项数组（如 selectedIds）与总数据列表（如 allItems）之间的关系。全选状态本质是一个计算结果，应由数据驱动，而非 DOM 状态。
用 computed 实现全选状态的响应式推导
全选按钮的 v-model 应绑定一个计算属性（isAllSelected），它根据当前选中项和总项数自动判断：
- 当
selectedIds.length === allItems.length && allItems.length > 0→ 全选 - 当
selectedIds.length === 0→ 全不选 - 否则 → 半选（可配合
indeterminate属性实现 UI 效果）
这样无需 watch，视图自动同步，逻辑更可靠。
用 watch 监听 selectedIds 变化并同步更新全选 UI
如果必须用 watch（例如需触发副作用、埋点或联动其他组件），应监听 selectedIds 数组本身，并深度比较变化：
- 使用
watch(selectedIds, (newVal, oldVal) => {...}, { deep: true }) - 避免监听原始数组引用（浅监听会失效），尤其在 push/splice 等原地修改场景
- 在回调中重新计算全选状态，再赋值给一个响应式变量（如
allChecked），供全选 checkbox 使用
全选按钮点击时，统一维护数据一致性
点击“全选/取消全选”按钮时，不要直接操作 DOM 或切换所有子 checkbox 的 checked 属性，而应：
- 全选：将
allItems.map(item => item.id)赋给selectedIds - 取消全选：清空
selectedIds = [] - 子项变更时，用
includes+filter或Set增删 ID，保持数组纯净
这样所有状态都源于单一数据源，避免视图与数据脱节。
避免常见陷阱：DOM 操作干扰响应式
不要通过 ref 获取全选 checkbox 元素并手动设 .checked，这会绕过 Vue 响应系统，导致：
- 下次
selectedIds变化时 UI 不更新 - 父子组件通信错乱
- 测试难覆盖、调试难定位
始终让数据成为唯一事实来源，UI 是它的投影。
