inject 的值在 created 钩子中才真正可用；data 和 props 默认值中直接访问会得 undefined，因注入发生在 initInjections 阶段（created 前、data 后）；应优先在 created 或 props default 中使用，避免初始化时依赖 this.injectedValue。

inject 注入的数据在 created 钩子之后才真正可用，但具体能否访问，取决于 provide 的定义方式和组件的初始化顺序。最常踩的坑是：在 data、computed 或 props 默认值中直接使用 this.injectedValue，此时 this 还未完成依赖注入，值为 undefined。

inject 的实际可用时机

Vue 的 inject 不是在 beforeCreate 就准备好，而是在 initInjections 阶段执行——这个函数位于 created 之前、data 初始化之后，但早于 props 默认值求值和 computed 初始化。这意味着：

• 在 created 钩子中，inject 的值已经注入完毕，可安全访问
• 在 data() 函数内部，this 还未完成 inject 绑定，访问会得到 undefined
• props 的 default 函数 执行时，inject 已就绪（Vue 2.2.1+），所以可用于提供默认值
• computed 和 watch 声明时，inject 可用；但若依赖项在 setup() 中提前读取（Vue 3），需确保 provide 已同步调用

避开初始化空值的 3 种写法

避免在 data 或初始化逻辑中直接引用 inject 值：

• ✅ 改用 props default 函数：props: { msg: { default() { return this.foo } } }
• ✅ 在 created 中赋值：created() { this.localMsg = this.foo || 'default' }
• ✅ Vue 3 中用 setup + inject 并配合 ref 或 reactive 包裹，不依赖 this 上下文

provide 必须同步、尽早声明

inject 能否及时就位，高度依赖 provide 的定义时机：

• Vue 2：provide 应为对象或返回对象的函数，且必须在组件选项中直接定义（不能延迟计算）
• Vue 3：provide 必须在 setup() 开头同步调用，否则后代组件 inject 会返回 undefined
• 若 provide 返回函数，该函数应在首次调用时即返回稳定值，避免每次返回新对象导致响应失效

关键不是“什么时候能写 inject”，而是“什么时候 this 上的注入属性已挂载”。盯住 created 这个分水岭，就能绕开绝大多数空值陷阱。