vue依赖注入（provide/inject）适用于树形菜单跨层级共享数据，通过provide注入响应式菜单上下文，子组件inject获取并操作展开、选中等状态，配合唯一key和错误检查保障无限递归稳定性。
Vue 的依赖注入（provide/inject）非常适合在树形菜单这类深层嵌套组件中实现跨层级的数据共享，尤其适用于无限级递归节点——无需层层 props 透传，也不用全局状态管理。
用 provide 注入统一的菜单控制上下文
在最外层菜单容器（如 MenuTree.vue）中，通过 provide 暴露一个响应式对象，包含所有子节点需要访问和操作的数据与方法：
- 用
reactive或ref包裹菜单数据源（如menuItems）、当前展开/选中状态、折叠/展开逻辑等 - 把整个上下文对象
provide('menuContext', context)，确保后代组件能稳定访问同一引用 - 注意：避免直接
provide原始数组或对象，必须是响应式包装后的值，否则子组件无法触发更新
子节点组件通过 inject 获取并响应式使用
每个递归节点组件（如 MenuItem.vue）调用 inject('menuContext')，拿到统一上下文后可直接读写：
- 读取
context.expandedKeys判断自身是否展开 - 调用
context.toggle(key)控制展开/收起，自动触发所有关联节点更新 - 监听
context.selectedKey实现单选高亮同步（配合watch或计算属性）
处理无限递归时的 key 唯一性与性能
无限级菜单常因 key 冲突或重复渲染导致注入失效或响应丢失：
- 每个节点必须有稳定、唯一、可追溯的
key（推荐用路径字符串如"root-1-2-3"，而非仅 id） - 在
inject后对上下文做浅层代理检查（如if (!context) throw new Error('Missing menuContext')），避免递归组件未挂载时注入失败 - 大量节点下建议配合
v-memo或虚拟滚动，但provide/inject本身不增加额外开销
父子联动与事件解耦设计
依赖注入不是单向数据流，而是建立协作契约：
- 父级提供
expandAll()、collapseAll()方法，子节点可直接调用，无需 emit 向上传递 - 子节点通过修改
context.selectedKey主动通知其他节点更新选中态，天然支持多节点响应 - 如需局部隔离（比如某子树独立控制），可在子组件内重新
provide覆盖部分字段，不影响外部上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
