provide/inject 是 vue 2.2+ 的祖先→后代单向跨层级通信机制，支持响应式数据传递与默认值配置，需用函数形式 provide 以访问 this，inject 推荐对象写法并注意响应式保持。
Options API 中的 provide 和 inject 是 Vue 2.2+ 引入的跨层级通信机制，专为祖先→后代单向传递设计，不依赖 props 钻取，也不需要中间组件参与。
祖先组件用 provide 提供数据
provide 可以是对象或返回对象的函数。推荐使用函数形式，以便访问 this 上的数据（如响应式状态、方法）：
- 若提供静态值，直接写对象：
provide: { theme: 'dark' } - 若需响应式或动态值，必须用函数：
provide() { return { user: this.currentUser, logout: this.handleLogout } } - 注意：
provide函数在组件实例创建时同步执行，不能放在mounted或异步回调里
后代组件用 inject 接收数据
inject 支持两种声明方式，都必须在组件选项顶层（不能在 methods 或生命周期钩子中调用）：
- 字符串数组写法（最简）：
inject: ['theme', 'user']，注入后可直接通过this.theme访问 - 对象写法（推荐）：
inject: { theme: { from: 'theme', default: 'light' }, userInfo: { from: 'user', default: () => ({ name: '游客' }) } }，支持重命名、默认值和工厂函数 - 默认值若为对象/数组，必须用函数返回，否则会被所有实例共享引用
响应式数据要特别处理
Options API 中 provide 默认不保持响应式——直接提供普通对象，后代拿到的是快照。要让数据变化同步更新，需满足：
- 祖先中用
data或computed返回响应式对象（Vue 2 自动代理），或 Vue 3 中显式用ref/reactive - 注入后，
this.user.name会响应更新；但若解构赋值如const { name } = this.user，将丢失响应性 - 方法（如
logout）可直接调用，无需额外处理
常见陷阱与规避建议
实际使用中容易踩坑的地方：
- 命名冲突：多个祖先提供同名 key 时，离后代最近的那个生效；建议用 Symbol（Vue 3）或带作用域前缀的字符串（如
'mylib-theme'） - 无法监听注入值变化：
inject本身不触发响应，但注入的响应式属性（如this.user.name）变化时，模板和watch仍能捕获 - 不适用于兄弟组件：它只走组件树垂直路径，横向通信需用事件总线、Pinia 或自定义事件
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
