provide 是 vue 3 composition api 中父组件向子孙组件跨层级提供数据的机制，必须在 setup() 中调用，需配合 ref/reactive 保持响应性，推荐用 symbol 避免命名冲突，适用于插件或主题注入等场景。
Vue 3 的 Composition API 中，provide 是在父组件中“提供”数据的入口，它必须在 setup() 或 <script setup></script> 中调用，配合 inject 在子孙组件中接收，实现跨层级通信。
provide 必须在 setup 内调用
不能在 onMounted、watch 等钩子中调用 provide —— 它只在组件初始化阶段生效，且只能执行一次。常见写法：
- 直接传入字符串 key 和任意值：
provide('theme', 'dark') - 传 ref 实现响应式：
const count = ref(0); provide('count', count) - 传 reactive 对象：
const state = reactive({ name: 'Vue' }); provide('appState', state) - 传函数供子孙调用：
provide('updateCount', () => count.value++)
响应式数据要显式保持响应性
provide 本身不自动包裹响应式，若传普通对象或原始值，inject 后不会随源更新。关键点：
- 用
ref或reactive包裹数据，再传入 provide - 避免直接传解构后的属性，如
provide('name', state.name)—— 这会丢失响应性 - 如需只读保护，用
readonly(count)再传入，防止子孙组件意外修改
推荐搭配 inject 使用默认值和类型安全
inject 支持第二个参数作为默认值，提升健壮性；配合 TypeScript 可进一步约束类型：
-
const theme = inject('theme', 'light')—— 未 provide 时回退为 'light' -
const updateCount = inject void>('updateCount')—— 显式声明函数类型 - 若 key 名易错，可用 Symbol 代替字符串，避免命名冲突：
const ThemeKey = Symbol(); provide(ThemeKey, 'dark')
适合场景与注意事项
provide/inject 不是替代 props 的通用方案，而是为特定结构服务：
- 适用于插件、UI 库（如主题、配置全局注入）、高阶组件封装
- 不适合用于父子间简单通信 —— 优先用 props + emits
- 数据流应尽量单向：修改逻辑保留在 provide 方，inject 方只读 + 调用暴露的方法
- 慎用于频繁变更的大对象，可能影响依赖追踪效率
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
