provide/inject是向上就近查找的依赖注入机制，非覆盖关系；子组件inject绑定的是祖先链中首个匹配key的provide值，与自身同名data/props完全独立，互不影响。
子组件 inject 的值不会覆盖父组件 —— 这个说法本身存在误解。provide/inject 不是“覆盖”关系，而是“查找 + 绑定”关系。真正发生的是：子组件通过 inject 向上查找祖先组件提供的值，并将其绑定到自身实例上；父组件的 data、props 或 setup 中定义的同名变量，和 inject 绑定的属性完全独立，互不影响。
Provide 的作用域链本质是向上就近查找
Vue 内部为每个组件实例维护一个 _provided（选项式 API）或 provides（组合式 API）对象，存储该组件通过 provide 暴露的数据。当子组件调用 inject 时，Vue 会沿着组件的父链（parent → parent.parent → … → root）逐级查找第一个拥有对应 key 的 _provided/provides，找到即停止，不会继续往上找 —— 这就是“就近原则”，也是作用域链的核心逻辑。
- 如果 A 组件 provide('theme', 'light')，B 组件（A 的子组件）也 provide('theme', 'dark')，那么 B 的子组件 C inject('theme') 得到的是 'dark'，不是 'light' —— 因为 B 更近
- 这个过程不修改 A 或 B 的原始数据，只是读取并建立本地引用
- inject 的结果是只读绑定（除非你传入 ref/reactive），不会反向写入祖先的 provide 值
为什么看起来像“被覆盖”？常见混淆场景
实际开发中让人误以为“子组件 inject 覆盖了父组件”，往往源于以下几种情况：
- 同名变量冲突：父组件 data 中有 message，又 provide({ message: this.message })；子组件 inject(['message'])，再在 template 中直接写 {{ message }} —— 此时渲染的是 inject 的值，但父组件的 this.message 依然存在且未变
- 响应性误判：provide 传的是普通字符串（如 provide('msg', 'hello')），子组件 inject 后值不变；若父组件 later 改了 data.msg，inject 的 msg 不会更新 —— 这不是覆盖，而是非响应式传递导致的“不同步”
- 多层 provide 干扰：中间某层组件无意中 provide 了同名 key，导致深层子组件 inject 到的不是顶层预期值，误以为“被中间层覆盖”
如何确保 inject 拿到的是你想要的那一层？
关键不在“防止覆盖”，而在“精准定位”。推荐做法：
- 使用 Symbol 作为 key，避免字符串命名冲突：const themeKey = Symbol('theme')，provide(themeKey, themeRef)，inject(themeKey)
- 在 provide 侧显式注明来源，比如加前缀：provide('app-theme', themeRef)，而非泛用 'theme'
- 优先使用响应式值（ref / reactive）提供，保证 inject 后仍可响应更新
- 避免在中间业务组件随意 provide 全局语义的 key（如 'apiBase'、'user'），应集中在 Layout、Provider 等专用上下文组件中
App-level provide 是全局作用域的特例
通过 app.provide(key, value) 注入的值，会被所有组件在 inject 时作为“兜底”查找目标（即查完全部祖先都找不到时，才 fallback 到 app 级）。它不参与组件链的就近查找，而是独立于组件树的存在 —— 类似全局变量，但受 inject 显式控制，比 app.config.globalProperties 更安全、更可追踪。
