Vue 的 provide / inject 怎么用？有什么坑？

provide/inject 实现跨层级传递（祖先 → 后代），跳过中间的 props 透传。

// 祖先
import { provide, ref } from 'vue'
provide('theme', ref('dark'))
// 后代
const theme = inject('theme', 'light')  // 第二个参数是默认值

坑：

1. 不是响应式透传的银弹：provide 普通值，后代改了祖先感知不到；要响应式必须 provide 一个 ref / reactive
2. 耦合：后代依赖祖先注入了某个 key，组件独立性变差（建议用 Symbol 作 key 避免命名冲突）
3. 不要用于常规父子通信，那该用 props/emits

Vue3 里常配合 inject 做组件库的「上下文」能力（如 Form 与 FormItem 通信）。

同分类其他题目