vue 3 中用 ref 管理多选框选中项,推荐数组或 set 作为单一响应式数据源:数组适用于固定少量选项,直接 v-model 绑定;set 适合动态大列表,提升去重与查询效率,并配合 isallselected.ref 实现高效全选逻辑。

Vue 3 中用 ref 收集多选框选中项,核心是让响应式变量直接映射用户选择行为——不依赖计算属性反复遍历,也不靠 DOM 查询手动维护,而是用数组或 Set 作为单一数据源,由 v-model 自动同步。
用 ref 绑定数组,最简方式
适用于选项固定、数量不多的场景(如功能开关、类型标签):
- 定义
selected = ref([]),直接绑定到<el-checkbox-group v-model="selected"></el-checkbox-group>或原生<input type="checkbox" v-model="selected" :value="item.id"> - 初始化时填入后台返回的已选项 ID 列表,例如:
selected.value = ['gga', 'rmc'],对应 checkbox 自动勾选 - 取消/新增任一选项,
selected.value实时更新,无需额外逻辑
用 ref + Set 管理大列表或需去重的场景
当选项来自动态列表、存在重复添加风险,或需频繁判断是否包含某 ID 时,Set 比数组更高效:

