Vue中的provide和inject
Vue 中用于跨层级共享上下文的 provide/inject 机制及其适用边界。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
Vue中的provide和inject
provide 和 inject 用于在祖先组件和后代组件之间共享上下文数据，避免每一层都手动传 props。
一句话定义
如果 props 是一层层向下传值，那么 provide/inject 更像在组件树里开了一条跨层通道。
它解决什么问题
- 某份数据需要被较深层组件消费
- 中间组件并不真正关心这份数据
- 层层传
props已经变得笨重
最常见的使用场景
- 主题
- 表单上下文
- 组件库内部状态共享
- 祖先组件向一组后代暴露能力
和组件通信总览的关系
如果要先判断它和 props/emit、slot、pinia 的边界，继续看 vue-component-communication 和 vue-component-communication-selection.
最小例子
provide('theme', 'dark')const theme = inject('theme')和 props / emit 的边界
- 父子直接通信，优先还是 props 和 emit
- 跨很多层共享上下文时，才考虑
provide/inject
为什么不能滥用
因为一旦用多了，数据来源会变隐蔽，后代组件看起来像“凭空得到一个值”，可读性会下降。
最短记忆方式
provide/inject 适合共享上下文，不适合替代常规父子数据流。
面试要点
来自 vue-provide-inject-interview-question 的面试视角整理。
一句话回答
provide/inject 适合祖先组件向较深层后代共享上下文数据，避免层层传 props，但它不适合替代清晰的常规父子数据流。
最稳的回答主线
- 父子直接通信仍优先
props/emit - 跨很多层共享主题、表单上下文、组件库内部能力时，
provide/inject更合适 - 用多了会让数据来源变隐蔽，可读性下降
最短记忆方式
它适合共享上下文，不适合到处跳过正常数据流。