provide/inject 是 vue options api 中用于祖辈到深层后代组件跨层级通信的机制，支持响应式数据传递，需用函数形式 provide 以访问 this，inject 支持数组或对象写法并可设默认值。
Vue Options API 中的 provide 和 inject 是专为跨层级通信设计的机制，不依赖 props 透传，适合祖辈→孙辈甚至更深层组件间共享配置、状态或方法。
provide 的写法：支持对象或函数返回对象
在祖先组件中声明 provide，它必须是选项对象中的一个属性。值可以是普通对象，也可以是返回对象的函数（推荐后者，能访问 this 上的数据）：
- 静态提供：直接写对象，但无法响应式绑定 data 或 computed
- 动态提供：用函数形式，可读取
this.name、this.count等响应式数据 - 若要传递响应式值（如 ref 或 reactive），直接传入即可——注入后仍保持响应性
inject 的写法：支持数组或对象映射
在后代组件中通过 inject 选项接收，它接受两种格式：
- 数组写法：
inject: ['theme', 'user']，注入后自动挂载到组件实例上（如this.theme） - 对象写法：更灵活，可重命名、设默认值或指定 from 键名，例如：
{ themeName: { from: 'theme', default: 'light' } } - 默认值支持函数，避免浅拷贝问题，比如
default: () => ({})
响应式的关键：传 ref 或 reactive，而非原始值
provide/inject 本身不创建响应式连接，但若提供的值本身是响应式的（如 ref、reactive 或 computed），后代组件注入后依然能响应变化：
- 错误示范：
provide: { count: this.count }—— 传的是数字副本，不响应 - 正确做法：
provide() { return { count: this.countRef } }（countRef是ref(0)） - 也可提供整个 reactive 对象：
provide() { return { store: this.store } }，后代解构使用store.count即可响应
常见陷阱与注意事项
实际使用中容易忽略几个关键点：
-
provide只在当前组件及其所有后代生效，不能被兄弟组件或父组件访问 -
inject查找时向上遍历祖先链，一旦找到最近的provide就停止，不会跨分支 - 未提供却调用
inject('key')会报运行时警告；加默认值可避免：inject('api', null) - 不建议用
provide/inject替代状态管理（如 Pinia），仅用于局部上下文共享（主题、API 实例、表单配置等）
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
