Vue.js 的 provide/inject 是轻量跨层级依赖注入机制，适用于祖孙组件间共享配置、工具函数等低频变更数据，需成对使用且响应式需通过 ref/reactive 包裹实现。
Vue.js 的 provide 与 inject 是一种轻量、灵活的跨层级依赖注入机制，适用于祖孙组件甚至更深嵌套场景，不依赖事件总线或状态管理库，适合共享配置、工具函数、上下文等不可变或低频变更的数据。
Provide 与 Inject 的基本用法
父组件（或祖先组件）通过 provide 提供数据或方法，任意深层级的子组件（无需关心中间层级）通过 inject 获取。两者需成对使用，且 inject 不会自动响应 provide 中响应式数据的变化——除非提供的是响应式对象（如 ref、reactive）或显式使用 computed 包裹。
- provide 可在 setup() 中返回一个对象，或在选项式 API 中作为函数/对象写在组件选项里
- inject 在 setup() 中调用，接收 key 和可选默认值；在选项式中写在 data 或 computed 中均可，但推荐在 created 或 setup 中初始化
- key 名建议使用 Symbol 避免命名冲突，尤其在第三方组件或插件中
响应式数据的正确提供方式
直接 provide 普通对象或原始值，inject 后无法触发视图更新。要实现响应式注入，必须提供响应式包装后的值：
- 使用 ref 或 reactive 包裹后 provide，子组件 inject 得到的就是响应式引用
- 若需只读访问，可用 readonly + toRef 或 computed 封装，防止下游意外修改
- 避免在 provide 中直接返回 this.xxx（选项式），因为 this 绑定可能丢失；setup 中应明确声明并返回
典型适用场景与注意事项
provide/inject 不是通用通信方案，更适合“自上而下”的静态或半静态上下文传递：
立即学习“前端免费学习笔记（深入）”；
- 主题配置、国际化 locale、API 基础实例（如 axios 实例）、表单校验上下文
- 组件库中实现「作用域插槽 + 上下文透传」，例如 ElTable 的 column 注入
- 慎用于高频更新的状态（如计数器），此时推荐 useVModel、v-model 或 pinia；也不适合替代 props 显式传值
- inject 的默认值仅在 provide 缺失时生效，不会覆盖已提供的值；若需 fallback 逻辑，应在 inject 后手动判断
组合式 API 中的实用封装示例
为提升可维护性，可将 provide/inject 抽离为可复用的组合函数：
- 定义唯一 Symbol key：const ThemeKey = Symbol('theme')
- 创建 provideTheme() 函数，在 setup 中调用并传入 reactive theme 对象
- 创建 useTheme() hook，内部 inject(ThemeKey)，统一处理缺失时的警告或默认值
- 配合 defineComponent 的泛型或 TypeScript 接口，增强类型提示和安全性
