provide/inject 可让顶层菜单组件注入响应式 currentActiveKey，子项通过 inject 获取并响应式更新选中状态，避免 props 透传；同时注入 setActive 函数处理路径展开与副作用，确保父子联动与高亮同步。
Provide 可以让顶层组件向下注入一个响应式状态，所有嵌套的菜单项都能访问并响应式地更新当前选中项，避免层层 props 透传，也无需全局状态管理。
用 provide/inject 搭建菜单状态桥
在最外层菜单容器（如 MenuProvider）中，使用 provide 注入一个可读写的响应式引用，例如 currentActiveKey。这个 ref 就是整个菜单树共享的“唯一真相源”。
- 用
ref而非readonly，确保子菜单项能主动更新它（比如点击时赋值） - 同时提供一个辅助函数（如
setActive），封装更新逻辑并触发副作用（如滚动到可视、展开父级等） - 注入的 key 建议语义化，例如
'menu-active-key'，避免命名冲突
子菜单项自动绑定与响应
每个菜单项（MenuItem 或 SubMenu）在 setup 中调用 inject 获取 currentActiveKey 和 setActive，然后：
- 用
:class="{ active: currentActiveKey.value === props.key }"动态控制高亮样式 - 点击时调用
setActive(props.key)，触发所有监听该 ref 的组件重新计算 - 对于多级子菜单（如 SubMenu），还需监听
currentActiveKey变化，自动展开包含当前项的路径（可通过递归或预存路径映射实现）
处理路径展开与父子联动
仅同步 key 不够——用户点击深层子项时，中间的 SubMenu 需自动展开。这时可在 setActive 函数中补充逻辑：
- 维护一个扁平化的菜单配置数组，每项含
key和parentKey - 当设置新 key 时，向上遍历父链，把沿途所有
parentKey收集为expandedKeys - 将
expandedKeys同样通过 provide 注入，供 SubMenu 判断是否展开 - 也可用 computed 派生：每个 SubMenu 根据自身 key 是否在
expandedKeys.value中决定展开态
避免响应丢失与边界情况
常见陷阱包括异步更新、key 冲突、未正确解构 inject 结果：
- 不要在
inject后对 ref 进行解构（如const { value } = currentActiveKey），会切断响应性 - 菜单动态渲染（如权限过滤后重排）时，确保 key 全局唯一且稳定，避免因 key 变更导致状态错位
- 如果菜单支持多选或手风琴模式，需扩展
currentActiveKey为数组或对象，并调整判断逻辑
