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

插件开发中，配置从根组件层层透传到深层UI组件，是常见的痛点。例如主题色、API前缀、国际化语言等配置，并不适合每层手动传递。利用 Provide / Inject 机制，组件能够跨层级直接获取祖先提供的配置，跳过中间无关层，实现干净利落的配置传递。

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

多个插件可能同时提供名为 theme 或 apiBase 的配置，若使用字符串作为 key，极易发生覆盖，导致不可预料的后果。实践中，必须使用 Symbol 作为注入标识，从根本上杜绝冲突：

• 在插件入口统一定义唯一的 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 时传入工厂函数：inject(PluginConfigKey, () => ({ theme: 'light', locale: 'zh-CN' }))，未 provide 时自动降级为默认值，这是最稳妥的做法
• SSR 场景下，确保 provide 在组件挂载前执行，通常放在 setup 顶层或 createApp 阶段完成，避免服务端渲染时出现意外
• 对于非响应式默认值，无需额外处理；若需响应式，默认值也应包裹 ref 或 reactive，确保一致性