组合式函数不能直接调用 inject，必须由组件在 setup 中执行 inject 后将响应式数据传入；推荐显式传参，避免使用 getCurrentInstance 等私有 API。
在 Vue 3 组合式函数（Composable）中，若需访问祖先组件通过 provide 注入的状态，不能直接使用 inject（它只能在 setup 或生命周期钩子中调用），但可通过“延迟执行”或“依赖注入上下文传递”来实现。核心思路是：把 inject 调用移入组件的 setup，再将注入值传给组合式函数。
组合式函数不直接调用 inject
inject 是一个运行时 API，必须在组件实例上下文中调用（即在 setup()、onBeforeMount 等钩子内）。若在纯函数作用域里直接调用，会报错 inject() can only be used inside setup()。
✅ 正确做法：由组件负责注入，再把响应式数据作为参数传入组合式函数。
- 组件中调用
const theme = inject('theme') - 将
theme传给useUserSettings(theme)或useModal({ theme }) - 组合式函数内部只做逻辑处理，不触碰注入逻辑
封装可注入的 Composable 工厂函数
若多个组件需相同注入行为，可写一个工厂函数，接收 key 和默认值，返回一个“待执行”的注入函数，由调用方在 setup 中触发：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
export function createInjectableComposable(key, defaultValue) {
return () => {
const injected = inject(key, defaultValue)
if (!injected) throw new Error(`Missing provider for ${key}`)
return injected
}
}
// 使用
export default {
setup() {
const getTheme = createInjectableComposable('theme')
const theme = getTheme() // ✅ 在 setup 内调用
const { toggleDark } = useThemeToggle(theme)
return { toggleDark }
}
}
配合 getCurrentInstance 实现隐式注入（进阶）
在极少数需要“自动探测注入”的场景（如插件级 Composable），可借助 getCurrentInstance() 获取当前组件实例，再手动访问其 appContext.provides（注意：这是私有 API，不推荐生产使用，仅用于理解原理）：
- 仅限调试或内部工具函数
- 无法响应式更新（
provides是普通对象） - 破坏 Composition API 的声明式原则，应优先选择显式传参
Provide/Inject + reactive 配合最佳实践
为确保注入状态响应式且可被 Composable 安全消费，建议：
- 提供端始终用
reactive或ref包裹后 provide，例如：provide('user', reactive({ name: 'Alice' })) - 消费端传入组合式函数的也应是响应式对象（非解构后的原始值），避免丢失响应性
- 如需监听注入变化，可在组合式函数内使用
watch监听传入的 ref 或 reactive 对象
本质上，Vue 的响应式系统和依赖注入是解耦的；组合式函数本身无渲染上下文，必须由组件桥接。清晰的职责划分——组件负责“接入”，Composable 负责“用好”——才能写出可维护、可测试的逻辑单元。
