动态组件中 inject 能正常工作,前提是 provide 必须在祖先组件(非父级)中声明且上下文未被 v-if 等移除;provide 应使用 ref 或 reactive 保证响应性,keep-alive 缓存组件的 inject 值不会自动更新。

Vue.js 的响应式系统与动态组件渲染、依赖注入三者并非孤立运作,而是协同工作的关键链路。当使用 <component :is="currentComponent"></component> 切换组件时,新组件的初始化过程会触发其自身的响应式建立和依赖注入流程——但前提是 provide/inject 的上下文在组件树中持续有效。
动态组件加载时 inject 能否正常工作?
可以,但有前提:provide 必须在动态组件的祖先组件(非父级,而是挂载路径上的上级)
- 如果
<component :is="..."></component>直接写在根组件内,而根组件调用了provide(),那么所有动态加载的子组件都能通过inject获取数据 - 如果动态组件被包裹在某个中间容器里,而该容器未继承 provide 上下文(比如用
v-if移除了提供者),注入就会失败 - 特别注意:
keep-alive缓存的动态组件,其 inject 值不会随 provide 变化自动更新——因为注入发生在组件创建时,不是响应式绑定
响应式数据如何影响 provide 的内容传递?
provide 默认不自动响应式,但可主动构造响应式源:

