vue 的 reactive 是响应式系统核心，权限数据须用 reactive({ permissions: [] }) 初始化以确保深层响应性；异步加载后直接赋值触发更新；computed 动态过滤菜单；路由守卫结合权限码集合实现闭环校验。
Vue 的 reactive 是响应式系统的核心工具之一，处理用户权限列表的动态加载与渲染时，关键在于让权限数据真正“可追踪、可联动、可更新”。它不是简单存个数组，而是要确保从请求、赋值、过滤到视图渲染整个链路都保持响应性。
权限数据用 reactive 正确初始化
权限列表（如菜单项、按钮配置、路由元信息）应统一用 reactive({ list: [] }) 包裹，而非 ref([])。尤其当权限结构是嵌套对象（含 children、roles、permission 字段等）时，reactive 能自动深层代理，避免手动解包或丢失响应性。
- 错误写法：
const permissions = ref([])→ 后续 push 或深层属性修改可能不触发更新 - 推荐写法：
const state = reactive({ permissions: [], userInfo: { role: '', perms: [] } }) - 搭配
toRefs解构时注意：仅解构顶层属性，避免破坏响应性连接
加载后自动触发视图更新
权限数据通常来自异步接口（如 /api/user/permissions），拿到响应后直接赋值给 reactive 对象字段即可，无需额外通知 Vue。
- 使用
await获取权限后：state.permissions = res.data.list - 若需合并或转换（如扁平化菜单树），应在赋值前完成，且确保返回的是新对象/数组（避免直接 mutate 原对象）
- 不要在
computed中重复请求或做副作用操作；请求逻辑放在setup或onMounted中
用 computed 实现权限驱动的动态过滤
菜单、按钮、表格操作列等 UI 元素，应基于 state.permissions 和 state.userInfo 构建计算属性，实现“数据变 → 视图自动重算”。
- 例如过滤可访问菜单：
const filteredMenu = computed(() => state.permissions.filter(item => item.roles?.includes(state.userInfo.role))) - 支持多角色时，用
new Set([...state.userInfo.roles])提升判断效率 - 模板中直接
v-for="item in filteredMenu"，无需methods或watch手动同步
配合路由守卫实现权限闭环
reactive 管理的是视图层权限状态，但跳转拦截需在路由层面补全。建议将权限数据注入路由元信息或全局状态，供 router.beforeEach 读取校验。
- 登录后把
state.permissions映射为权限码集合（如Set(['user:list', 'order:edit'])） - 守卫中检查目标路由
to.meta.requiredPerms是否全部满足，否则重定向 - 这样菜单“不可见”+路由“不可进”，避免权限绕过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
