Vue3 Composition API中inject在onMounted返回undefined的原因咨询

核心原因 #

Vue 的 inject 函数只能在组件的同步 setup 阶段调用，无法在异步回调或生命周期钩子（如 onMounted）中获取到依赖注入的值。

细节拆解 #

1. props 默认值能拿到值的原因
   你在 props 的 default 函数中调用 inject 时，这个函数是在组件初始化、解析 props 的阶段执行的——该阶段属于 setup 的同步执行流程，此时组件还能访问到根应用通过 app.provide 提供的依赖注入上下文，因此能正确获取到 componentId。

2. onMounted 中 inject 返回 undefined 的原因
   onMounted 钩子是在组件挂载完成后才触发的，此时组件的 setup 同步执行阶段已经完全结束，依赖注入的上下文已经失效，这时候调用 inject 自然会返回 undefined。

解决办法 #

如果需要在生命周期钩子中使用这个注入的值，只需在 setup 的同步阶段先将值保存下来即可：

<script setup>
import { inject, onMounted, defineProps } from 'vue';

// 在setup同步阶段提前获取并保存注入的值
const injectedComponentId = inject('componentId');

const props = defineProps({
  componentId: {
    type: String,
    required: true,
    default: () => injectedComponentId,
  },
});

onMounted(() => {
  console.log('inject componentId', injectedComponentId); // 此时能拿到正确值
});
</script>

内容的提问来源于stack exchange，提问作者Alex Arvanitidis