provide/inject 是专为跳过中间层共享低频变更数据的机制，适用于主题配置、全局工具函数、上下文状态等；须用 Symbol 作 key、reactive/ref 包裹响应式数据，并配合 TypeScript 类型校验。
要实现祖孙组件间的高效通信，provide/inject 不是“替代 props 的万能方案”，而是专为跳过中间层、稳定共享低频变更数据设计的机制。关键不在“能传”，而在“怎么传得清、稳、可维护”。
明确适用场景，不滥用
它最适合以下几类数据：
- 主题配置（如 darkMode、locale）
- 全局工具函数（如 $message、$request）
- 上下文状态（如表单校验规则 rules、编辑器实例）
- 不可变或极少更新的配置对象（如 API 基础路径、权限白名单）
不适合频繁变化的状态（如计数器、实时聊天消息），这类应走 Pinia 或事件总线。
用 Symbol 做 key，避免命名污染
字符串 key 容易冲突，尤其在插件或多人协作项目中。推荐统一管理注入标识：
// constants/symbols.ts
export const FORM_RULES = Symbol('FORM_RULES')
export const THEME_CONTEXT = Symbol('THEME_CONTEXT')
祖先组件中提供：
import { provide, reactive } from 'vue'
import { FORM_RULES } from '@/constants/symbols'
setup() {
const rules = reactive({ name: 'required', email: 'email' })
provide(FORM_RULES, rules)
}
孙子组件中注入：
import { inject } from 'vue'
import { FORM_RULES } from '@/constants/symbols'
setup() {
const rules = inject(FORM_RULES)
// ✅ 类型安全 + 无冲突风险
}
响应式必须靠 reactive/ref 包裹
直接 provide 普通对象或字符串，后代组件拿到的是快照，不会随源头更新：
- ❌ 错误：provide('theme', 'light')
- ✅ 正确：provide(THEME_CONTEXT, ref('light')) 或 provide(THEME_CONTEXT, reactive({ mode: 'light' }))
- ? 更优：若需方法+状态组合，提供一个 reactive 对象，把值和操作都放进去
例如：
const themeState = reactive({
mode: 'light',
toggle() {
this.mode = this.mode === 'light' ? 'dark' : 'light'
}
})
provide(THEME_CONTEXT, themeState)
配合 TypeScript 提升健壮性
inject 支持类型断言和默认值，避免运行时 undefined：
interface ThemeContext {
mode: string
toggle: () => void
}
const theme = inject<ThemeContext>(THEME_CONTEXT, null)
if (!theme) {
throw new Error('ThemeContext not provided')
}
也可用 defineInject 辅助函数封装常用注入逻辑，统一处理缺失兜底。
