provide/inject 用于跨多层组件传递上下文数据，祖先通过 provide 广播、后代通过 inject 直取，中间组件无需参与；需用 ref/reactive 保持响应式；适合主题、权限等场景，不宜替代 props 或状态管理。
当组件嵌套很深，比如 App → Layout → Sidebar → Menu → MenuItem，而 MenuItem 需要用到 App 里定义的主题色或用户权限数据时，用 props 一层层往下传不仅代码重复、易出错，还让中间组件承担了本不该关心的逻辑。provide/inject 就是专为这种场景设计的——祖先直接“广播”，后代直接“收听”，跳过所有中间环节。
核心逻辑：祖先提供，后代直取
provide 在祖先组件中调用，把数据以键值对形式“发布”出去；inject 在任意后代组件中调用，用相同的键名“订阅”该数据。中间组件完全不用声明 props、不参与传递、也不感知存在。
- provide 第一个参数是注入名（建议用字符串或 Symbol，避免命名冲突）
- 第二个参数是实际数据，可以是普通值、ref、computed，甚至整个响应式对象
- inject 只需传入相同注入名，就能拿到值；加第二个参数可设默认值，防止祖先未 provide 时报错
响应式数据要保持联动，得传 ref 或 reactive
如果祖先提供的数据会变化（比如用户登录后更新昵称），必须用 ref 或 reactive 包裹，否则后代 inject 到的是初始快照，不会自动更新。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- ✅ 正确写法：
const userName = ref('张三'); provide('userName', userName) - ❌ 错误写法：
provide('userName', '张三')（后续改值，后代收不到） - inject 拿到的是 ref 对象本身，使用时需 .value，如
{{ userName.value }}
应用级 provide：全项目通用配置更省事
如果某些数据（如 API 基础地址、国际化 locale、全局主题）全项目都要用，不必在每个根组件里 provide，直接在 createApp 时统一注册：
app.provide('apiBase', 'https://api.example.com')- 之后任意组件都能
inject('apiBase')，无需关心从哪来的 - 特别适合插件开发或微前端子应用共享上下文
注意边界：不是万能替代，别滥用
provide/inject 本质是“隐式依赖”，过度使用会让数据流向变模糊，不利于调试和协作。
- 适合跨多层的**上下文类数据**（主题、权限、表单校验器、语言包）
- 不适合频繁变更的**业务状态**（如购物车商品列表），这类更适合 Pinia 管理
- 父子通信仍优先用 props + emit，语义清晰、IDE 支持好、类型推导强
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
