Vue依赖注入作用域限于提供者及其后代组件树，兄弟、父级或跨树组件不可访问；就近覆盖规则使链上最近provide优先生效；app.provide为全应用级注入，优先级低于组件链provide；响应式对象注入后仍保持响应性。

Vue 组件间的依赖注入作用域，本质上是由组件树的父子继承关系决定的，不是全局共享，也不是任意组件间互通——它只在提供者（provider）及其直接或间接后代组件范围内生效。

作用域边界：仅限前代→后代组件链

provide 注入的数据，只能被其子组件、孙组件、曾孙组件……一直到整条组件树分支中的所有后代组件 inject 到。兄弟组件、父组件、同级组件、跨树组件都无法访问。

• Root → A → B → C：C 可以 inject Root 提供的值，也可以 inject A 或 B 提供的值（取最近的）
• A 和 B 是兄弟：B 无法 inject A 提供的值，即使它们有同一个父组件
• 两个独立挂载的组件树（如不同 app.mount() 实例）：彼此完全隔离，不共享 provide 数据

就近覆盖规则：链上最近的 provide 优先生效

如果多个祖先组件都用相同的 key 调用了 provide，后代组件 inject 时拿到的是组件链上离它最近的那个，更远的会被“屏蔽”。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• App → Layout → Page → Component
• App provide('theme', 'dark')，Layout provide('theme', 'light')，Component inject('theme') → 得到 'light'
• 这类似 CSS 的层叠逻辑，不是合并，而是覆盖

应用级 provide：全应用作用域（特殊例外）

通过 app.provide() 注入的数据，属于整个 Vue 应用实例的作用域，所有组件（只要属于该 app）都能 inject 到——它不依赖组件树位置，是真正的“全局注入”，常用于插件开发或根级别配置。

立即学习“前端免费学习笔记（深入）”；

• 与组件内 provide 独立并存，优先级低于组件链上的 provide（即组件链上有同 key，就忽略 app.provide 的）
• 适合注入工具函数、API 客户端、i18n 实例等不随局部状态变化的依赖

响应式链接保持在作用域内

注入的 ref 或 reactive 对象，其响应式连接不会因跨组件而断裂。但注意：inject 返回的是原始 ref 对象本身，不是它的 .value —— 所以后代组件仍需 .value 读写，并能触发视图更新，前提是提供方的响应式源没被意外替换。

• 提供方：provide('count', ref(0))
• 注入方：const count = inject('count'); console.log(count.value) // ✅ 可读；count.value++ // ✅ 可改且响应
• 但如果提供方 later 重新 assign 了新的 ref，则注入方不会自动切换（这是设计使然，非 bug）