Vue 的 provide/inject 支持通过就近 provide 实现局部覆盖：inject 会沿组件链向上查找第一个同名 provide，中间层组件只要 provide 相同 key，就会遮蔽祖先提供的值，同时不会影响其他分支；实际开发中建议优先使用 Symbol 作为 key 以减少冲突，并谨慎用于过细粒度的覆盖场景。
Vue 的 provide/inject 机制本身并不是“直接修改祖先 provide 的值”，但通过合理的组件设计，可以实现局部覆盖祖先数据的效果：让后代组件再次提供同一个 key，这样就会形成“离当前组件最近的 provide 优先使用”的注入规则。本质上，这正是 Vue 依赖注入的查找机制——inject 会沿着组件链逐层向上查找，命中第一个匹配的 provide 就停止，而不是全局只能存在一份绑定。
覆盖原理：就近 provide 会优先于祖先 provide
Vue 在执行 inject 时，并不是从根组件统一分发，而是从当前组件开始向父级不断向上查找，遇到第一个 provide(key, value) 就立即返回。因此，只要在某一层组件中再次 provide 相同的 key，它就会对更上层祖先的同名值形成“局部遮蔽”。
- App（顶层）provide('theme', 'light') → 作为默认浅色主题
- PageA 组件内部 provide('theme', 'dark') → 在该分支中覆盖 App 的 theme
- PageA 下所有子组件 inject('theme') 获取到的都是 'dark'，而不是 'light'
- PageB 没有再次 provide → 它及其后代依然使用 App 提供的 'light'
实操：在中间层组件中实现局部重新 provide
例如某个业务模块需要独立主题，不希望完全跟随全局配置，那么可以在该模块的入口组件（如 Dashboard.vue）中重新 provide：
需要注意的是：这里通常不必先 inject 祖先值再去“覆盖”，如果目标只是替换当前分支的注入结果，直接 provide 新值就能生效，而且不会波及其他组件分支。
配合 readonly 防止意外修改祖先数据
如果祖先 provide 的是响应式对象（例如 reactive({ lang: 'zh' })），而你只想在局部覆盖语言配置、同时保留响应能力，比较推荐在中间层做一次封装后再 provide：
- 祖先提供：
provide('locale', reactive({ lang: 'zh', messages: {} })) - 中间层覆盖：
provide('locale', readonly({ ...toRaw(inject('locale')), lang: 'en' })) - 下游组件 inject 到的是只读副本，不能直接修改原始对象，但可以读取新的 lang 值
慎用场景与替代建议
局部覆盖 provide/inject 更适合边界明确的业务模块，比如不同页面、不同功能区或独立容器，但并不适合高频切换状态，或过于细粒度的组件级覆盖：
- 不要在大量叶子组件中反复 provide 同一个 key —— 否则很容易增加维护成本并让依赖关系变得混乱
- 如果覆盖逻辑较复杂（例如根据用户角色、路由参数或上下文动态计算），建议提取为 composable，统一封装和管理注入逻辑
- 在确实需要“多套配置并存”的场景下（如 A 区块使用 theme-A，B 区块使用 theme-B），可以改用 Symbol 作为 key，避免字符串 key 冲突：
const THEME_A = Symbol('theme-a')
