如何利用 Provide / Inject 解决插件开发中的跨级配置难题

Provide/Inject 通过 Symbol 键实现插件配置安全透传，支持响应式提供、读写分离、组合式函数封装及 SSR 默认值降级。

插件开发中常遇到配置要从根组件一路透传到深层 UI 组件的问题，比如主题色、API 前缀、国际化语言等。Provide / Inject 正是为这类场景设计的——它让插件内部组件能直接“认领”祖先提供的配置，跳过中间所有无关层。

用 Symbol 定义唯一配置键，避免插件间冲突

多个插件可能都提供名为 theme 或 apiBase 的配置，字符串 key 极易覆盖。必须用 Symbol 作为注入标识：

• 在插件入口统一定义：export const PluginConfigKey = Symbol('my-plugin-config')
• 祖先组件（如 App 或 Layout）调用 provide(PluginConfigKey, reactive({ theme: 'blue', apiBase: '/v2' }))
• 插件内任意子组件（哪怕嵌套 5 层）直接 inject(PluginConfigKey) 获取，不会被其他插件同名 key 干扰

提供响应式配置 + 显式更新方法，兼顾读写安全

只读配置容易维护，但插件有时需动态切换（如用户点选主题）。推荐拆分暴露：

• 只读配置对象：用 computed(() => ({ ...config.value })) 包裹后 provide，防止下游意外修改
• 专用更新函数：单独 provide updateConfig 方法，命名清晰、意图明确，例如：provide('updateMyPluginConfig', (newOpts) => { Object.assign(config.value, newOpts) })
• 下游组件按需 inject 两者，读写分离，逻辑可控

结合 Composition API 封装可复用的 usePluginContext

把 provide/inject 逻辑收进组合式函数，让插件使用者无感接入：

• 插件内部定义 useMyPlugin：在 setup 中自动调用 provide，并返回初始化方法
• 业务组件只需 import { useMyPlugin } from 'my-plugin'，调用 useMyPlugin({ theme: 'dark' }) 即完成全局配置下发
• 插件子组件统一用 const ctx = inject(PluginConfigKey) 拿配置，不再关心来源层级

支持 SSR 和默认值，提升插件健壮性

插件要能在服务端渲染和独立使用场景下正常工作：

• inject 时传入工厂函数作为默认值：inject(PluginConfigKey, () => ({ theme: 'light', locale: 'zh-CN' }))，未 provide 时自动降级
• SSR 场景下确保 provide 在组件挂载前执行（通常在 setup 顶层或 createApp 阶段完成）
• 对非响应式默认值，无需额外处理；若需响应式，默认值也应包裹 ref 或 reactive