关键在于用 reactive 构建可响应、可联动、可复用的权限结构：菜单树用 reactive 包裹嵌套原始数据，勾选状态用 map 按菜单 id 隔离，父子联动通过 togglenode 函数和 computed 实现，变更后触发提交或更新请求头。
用 reactive 维护权限角色列表和勾选状态，关键不是“存数据”，而是让结构可响应、可联动、可复用。角色列表（如菜单树）和勾选状态（如按钮权限）天然存在父子依赖关系，直接用普通对象或数组容易丢失响应性，尤其在动态渲染、切换菜单、重置时出问题。
角色菜单树用 reactive 包裹，但需保留原始结构语义
后端返回的菜单数据通常带层级（如 children 字段），前端应原样保留，再用 reactive 封装：
- 不要 flatten 后再 reactive —— 会破坏父子关系，影响树形勾选逻辑
- 推荐结构：
const menuTree = reactive({ list: [] })，其中list是后端返回的嵌套数组 - 每个节点建议带唯一
id和parentId，方便后续递归计算选中状态 - 若需标记是否可勾选（如父权限禁用子项），可在节点加
disabled: true字段，模板中用v-if="!item.disabled"控制显示
勾选状态不能只靠本地变量，得按菜单隔离存储
用户切换不同菜单时，上一个菜单的勾选不能残留。单纯用 ref([]) 或 reactive([]) 存所有选中 ID，会导致跨菜单污染：
- 正确做法：用
Map按菜单 ID 隔离状态，例如const buttonStates = reactive(new Map()) - 当前菜单 ID 变化时，自动读取或初始化对应键：
buttonStates.get(currentMenuId) ?? [] - 勾选变更时，先 set 再触发更新：
buttonStates.set(currentMenuId, [...new Set([...prev, id])]) - 清空某菜单状态：
buttonStates.delete(currentMenuId)；重置全部：buttonStates.clear()
父子联动勾选要用 computed + 工具函数，别硬写逻辑
树形结构中，勾选父节点应自动勾选/取消全部子节点。这个行为不能靠模板里反复 v-model 绑定，而要封装成可复用逻辑：
- 提供
toggleNode(node, checked)函数，内部递归处理 children，并同步更新 Map 中对应菜单的按钮数组 - 用
computed派生“全选状态”：const isAllChecked = computed(() => node.children?.every(c => checkedIds.includes(c.id))) - 模板中绑定：
:checked="checkedIds.includes(node.id)" @change="toggleNode(node, $event.target.checked)" - 避免直接修改
node.checked = true—— 这种赋值不触发响应，且破坏 reactive 原始结构
状态变更要触发副作用，比如提交或同步请求头
勾选变化不只是 UI 更新，往往需要立即提交、或影响后续 API 行为：
- 监听 Map 变更：
watch(buttonStates, (newMap) => { submitPermissions(newMap.get(currentMenuId)) }, { deep: true }) - 如果权限变更影响请求头（如角色切换后 token 变），应在勾选完成回调里显式更新：
axios.defaults.headers.common['X-Permission-Ids'] = JSON.stringify(ids) - 注意：不要在 watch 里调用异步接口后直接修改 reactive 对象 —— 容易造成响应链断裂，应先 commit 状态，再发请求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
