vue 3 的 provide/inject 对非响应式常量和响应式状态混合注入完全兼容：常量注入后为不可响应的快照副本，适用于配置项等不变数据；响应式状态需用 ref/reactive 包裹才能保持响应性；推荐用 symbol 或 reactive 封装对象组织混合注入，并在 inject 侧设置默认值兜底。
Vue 3 的 provide 和 inject 对非响应式常量和响应式状态的混合注入完全兼容，但处理逻辑不同：常量注入后不会自动响应变化，而响应式状态（ref、reactive）注入后仍保持响应性。关键在于「提供什么」和「如何使用」，而非注入方式本身。
非响应式常量的注入与注意事项
直接 provide 字符串、数字、对象字面量等，会被当作普通值注入，后代组件 inject 后得到的是快照副本，后续父组件修改该变量不会触发子组件更新。
- 适合场景：配置项、API 地址、版本号、枚举常量等运行时不变的数据
- 常见错误：把一个 let 变量反复赋值，却期望 inject 处能 reactive 更新——这不会生效
- 正确写法示例：
provide('APP_NAME', 'MyAdmin')或provide('MAX_RETRY', 3)
响应式状态的注入必须用 ref / reactive 包裹
只有经过 ref、computed、reactive 等响应式 API 创建的对象，才能在注入后保持响应链完整。inject 得到的仍是原始响应式引用，可读可写（除非显式 readonly）。
-
const count = ref(0)→provide('count', count)→ 子组件inject('count')修改.value会同步更新所有依赖处 -
const user = reactive({ name: 'Alice' })→provide('user', user)→ 子组件直接解构或访问属性仍响应 - 注意：不要对
reactive对象再套一层ref，否则需多一层.value访问，徒增复杂度
混合注入时的组织建议
当一个祖先组件既要提供常量又要提供响应式状态，推荐按语义分组管理，避免 key 冲突和维护混乱。
- 用 Symbol 做 key 更安全，尤其在插件或组件库中：
const APP_CONFIG = Symbol('APP_CONFIG')、const CURRENT_USER = Symbol('CURRENT_USER') - 也可统一用对象封装，再用
reactive包裹整个状态包（含常量字段 + 响应式字段），例如：provide('appState', reactive({ version: '2.1.0', userInfo: ref(null), theme: computed(() => ...)})) - 不推荐将大量常量和响应式数据混用字符串 key，容易因拼写或覆盖引发隐性 bug
inject 侧的安全兜底
无论注入的是常量还是响应式值，都建议在 inject 时设置默认值或类型守卫，尤其是跨层级调用时无法保证 provide 一定存在。
- 基础兜底：
const apiUrl = inject('API_URL', 'https://dev.example.com') - 响应式兜底（避免 undefined.value 报错）：
const count = inject('count', ref(0)) - 工厂函数兜底（适合开销大的默认值）：
inject('cache', () => new Map(), true)
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
