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。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章