provide/inject 是专为多层级跨组件共享静态或低频变更上下文设计的机制，适用于主题配置、国际化、权限上下文等自上而下只读、结构稳定、跨多层场景，需用 ref/reactive 包裹响应式数据并推荐 Symbol 键名。
Vue 中的 provide/inject 不是用来替代 props 或 v-model 的，而是专为多层级跨组件共享静态或低频变更上下文设计的机制。它解决的是“祖辈 → 曾孙辈甚至更深”之间重复透传 props 的冗余问题，不是通用通信方案，用对场景才真正省力。
什么时候该用 provide/inject？
核心判断标准：数据是否具有自上而下、只读为主、结构稳定、跨多层但不频繁更新的特点。
- 主题配置（dark/light 模式）、国际化 locale、用户权限上下文
- 表单容器与内部 Field 组件共享校验规则、禁用状态
- UI 组件库中实现列配置透传（如 ElTable column 注入）
- API 实例（如封装好的 axios 实例）、工具函数（格式化、权限检查）
响应式数据必须显式包裹
直接 provide 普通对象或字符串，inject 后修改不会触发视图更新——这是最常见踩坑点。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 用
ref或reactive包裹后再 provide，后代 inject 到的就是响应式引用 - 若只需只读访问，可用
readonly+toRef或computed封装，防止下游误改 - 避免在 provide 中返回
this.xxx（选项式）或未声明的 setup 变量，易丢失响应性或 this 绑定
键名推荐用 Symbol，避免冲突
字符串 key 在大型项目或引入第三方组件时容易重名，导致注入错乱。
立即学习“前端免费学习笔记（深入）”；
- 定义唯一 Symbol：
const ThemeKey = Symbol('theme') - provide 时传 Symbol：
provide(ThemeKey, theme) - inject 时也用同一 Symbol：
const theme = inject(ThemeKey) - 配合 TypeScript 使用，还能获得类型推导和 IDE 自动补全支持
别把它当事件总线或状态管理用
provide/inject 是依赖注入，不是通信通道：
- 不能反向通知祖先组件（比如子组件不能直接改 provide 出来的原始 ref）
- 不支持广播、订阅、跨独立子树同步（如侧边栏与主内容区需共享状态，应选 Pinia）
- 高频更新状态（如计数器、实时搜索关键词）请用 v-model、useVModel 或 Pinia
- 兄弟组件协同优先考虑提升状态到共同父级，或使用 Pinia 订阅
