Provide/Inject 是 Vue 原生依赖注入机制：祖先 provide（需 Symbol key、ref/reactive 包裹）、后代 inject（不可解构 ref、推荐默认值），仅适用于祖→后代单向通信，非 props 替代或状态管理轻量版。
Provide/Inject 是什么
它不是 props 透传的替代写法，也不是状态管理器的轻量版，而是 Vue 原生支持的依赖注入机制：祖先组件主动“提供”（provide）数据或函数，任意深度的后代组件按需“注入”（inject）使用，中间完全跳过中间层。这种通信只在同一条组件链上生效，天然单向、自上而下，适合主题、权限、表单上下文等局部但跨多层的场景。
怎么安全地 provide 数据
在祖先组件的 setup() 顶层 调用 provide，关键细节有：
- 用 Symbol 作 key（如
const themeKey = Symbol('theme')），避免字符串命名冲突，尤其在组件库或插件中 - 若要响应式，必须把值包裹为
ref或reactive；直接 provide 普通对象，后代拿到的是静态快照，改了也不更新 - 可一起提供数据和修改函数，例如：
provide(themeKey, { color: ref('blue'), setColor: (c) => color.value = c }) - 不推荐在条件分支或异步回调里调用 provide —— 它必须同步执行，否则后代 inject 会找不到
怎么正确地 inject 使用
在任意后代组件 setup() 顶层调用 inject，注意三点：
- key 必须和 provide 时完全一致（类型、值都相同），Symbol 更安全
- 注入的是
ref时，不能解构（如const { color } = inject(themeKey)会丢失响应性），应保持theme.color.value或用toRef提取 - 加默认值更健壮：
inject(themeKey, 'light')（非响应式默认值）或inject(themeKey, () => ({ color: 'light' }), true)（工厂函数，默认值也支持响应式初始化）
常见误区与边界提醒
Provide/Inject 很轻巧，但不是万能胶：
立即学习“前端免费学习笔记（深入）”；
- 不适用于兄弟组件通信 —— 它只走祖辈→后代路径，没有横向能力
- 不替代 Pinia/Vuex —— 它不管理状态生命周期、不支持时间旅行、无模块化设计，仅用于明确的局部依赖
- 注入值本身不自动响应，但注入的
ref或reactive属性是响应的 —— 修改theme.color.value，所有 inject 处立刻更新 - TypeScript 用户建议配合
InjectionKey泛型，如inject<Theme>(themeKey)，获得完整类型推导和安全校验
