Provide/Inject 是 Vue 跨层级通信与架构解耦的核心机制，基于响应式引用共享实现稳定数据传递、符号键保护、只读注入及与 Composition API 深度协同，可替代 Vuex/Pinia 实现轻量状态分片。

Provide / Inject 不是简单的父子传值工具，它是 Vue 应用实现跨层级通信与架构解耦的核心机制。关键在于理解其“依赖注入”的本质——父级提供（provide）的是响应式引用或可变对象，子级注入（inject）拿到的是同一份引用，而非拷贝。

跨多层组件的稳定数据传递

当组件嵌套超过三层（如 Layout → Sidebar → UserCard → Avatar），props 逐层透传既冗长又脆弱。Provide / Inject 可跳过中间层直接建立“供应-消费”关系：

• 在根布局组件中 provide 一个 reactive 对象，包含用户信息、主题配置等全局状态
• 任意深层子组件 inject 同名 key，即可访问并响应更新
• 无需 emit 或事件总线，修改 provide 的响应式属性，所有 inject 处自动同步

避免意外修改：只读注入与符号键保护

默认 inject 是可写的，容易引发隐式副作用。推荐两种防护方式：

• 使用 Symbol 作为 provide key（如 const ThemeKey = Symbol('theme')），防止子组件误用字符串 key 冲突
• 注入时用 computed 包裹返回值，对外暴露只读代理：inject(ThemeKey, () => computed(() => ({ ... })))
• 对需要修改的场景，单独 provide 明确命名的 update 方法，语义清晰且可控

与 Composition API 深度协同

在 setup 或 <script setup> 中，provide / inject 可与 useXxx 组合式函数天然融合：</script>

• 封装一个 useModal，内部 provide 控制器对象（open/close/setData）
• 任意组件调用 inject('modal') 即可触发弹窗，无需 import 全局服务
• 多个模块可各自 provide 独立上下文（如 useTable、useForm），互不干扰

替代 Vuex/Pinia 的轻量状态分片方案

对于中型功能模块（如报表页、审批流），不必引入完整状态库。可用 provide 分层组织：

• 页面级 provide：当前业务实体（order、invoice）及其 CRUD 方法
• 区域级 provide：表格筛选状态、导出配置等局部上下文
• inject 时支持默认值和工厂函数，未找到 provider 时降级为本地状态，提升健壮性