动态组件中 inject 能正常工作，前提是 provide 必须在祖先组件（非父级）中声明且上下文未被 v-if 等移除；provide 应使用 ref 或 reactive 保证响应性，keep-alive 缓存组件的 inject 值不会自动更新。
Vue.js 的响应式系统与动态组件渲染、依赖注入三者并非孤立运作，而是协同工作的关键链路。当使用 <component :is="currentComponent"> 切换组件时，新组件的初始化过程会触发其自身的响应式建立和依赖注入流程——但前提是 provide/inject 的上下文在组件树中持续有效。
动态组件加载时 inject 能否正常工作？
可以，但有前提：provide 必须在动态组件的祖先组件（非父级，而是挂载路径上的上级）
- 如果
<component :is="...">直接写在根组件内，而根组件调用了provide()，那么所有动态加载的子组件都能通过inject获取数据 - 如果动态组件被包裹在某个中间容器里，而该容器未继承 provide 上下文（比如用
v-if移除了提供者），注入就会失败 - 特别注意：
keep-alive缓存的动态组件，其 inject 值不会随 provide 变化自动更新——因为注入发生在组件创建时，不是响应式绑定
响应式数据如何影响 provide 的内容传递？
provide 默认不自动响应式，但可主动构造响应式源：
- 直接 provide 原始值（如字符串、普通对象）→ 子组件 inject 后无法响应变化
- 正确做法是 provide 一个 ref 或 reactive 对象：
provide('theme', reactive({ mode: 'dark' }))
这样子孙组件 inject 后读取theme.mode就具备响应性 - Vue 3 中还可结合
computed提供派生状态：provide('userStatus', computed(() => user.value?.status || 'offline'))
动态组件 + provide/inject 的典型协作场景
常见于插件化布局、主题切换、权限上下文等需要“一次注入、多处复用”的结构：
立即学习“前端免费学习笔记（深入）”；
-
仪表盘模块切换：主布局 provide 用户权限配置，各动态加载的卡片组件（
DashboardCardA、DashboardCardB）统一 inject 权限校验函数 -
多语言面板：Layout 组件 provide
{ t, locale }，所有异步加载的 i18n-aware 动态组件均可直接使用 -
表单上下文透传：封装
<FormProvider>组件，内部 provide 表单状态与提交方法，内部任意层级的<component :is="fieldType">都能 inject 并联动校验
避免常见陷阱的实践建议
几个容易忽略却影响稳定性的细节：
- 不要在
setup()中直接调用provide()—— 它必须作为组件选项或在setup返回对象中显式声明 - inject 默认返回
undefined，务必检查是否存在，或设置合理默认值：inject('api', () => createDefaultApi()) - 动态组件若使用
defineAsyncComponent，provide 仍生效，但需确保异步组件定义前，provide 已在祖先节点完成注册 - 测试时注意：单元测试中若未 mount 提供者组件，inject 将为空，应手动 mock 或使用
app.provide()全局注入
