provide/inject 本身不自动创建响应式连接，需直接传递 ref 或 reactive 对象以保持响应性；注入时不可解构原始值，推荐用 readonly 保障只读安全，且禁止对 inject 结果二次响应式化。
Vue.js 的 provide/inject 本身不自动创建响应式连接，直接传递普通响应式对象（如 ref 或 reactive）是可行的，但需注意响应性是否真正被消费组件“追踪”——关键在于注入时是否正确解包或使用。
传递 ref 或 reactive 对象（推荐）
只要提供的是响应式引用（ref）或响应式对象（reactive），注入方在模板或 setup 中访问其值时，仍能保持响应性。Vue 不会“扁平化”或“拷贝”这些响应式包装器。
- 在 provide 端：用
ref或reactive包裹状态，并直接提供整个引用 - 在 inject 端：直接解构或访问属性，无需额外
toRef（除非要单独暴露某字段） - 避免提供原始值（如字符串、数字）或解构后的值（如
{ count }），否则会丢失响应性
需要跨层级更新时，配合 readonly 更安全
如果希望下游组件只读、防止意外修改，可在 provide 时用 readonly() 包裹，既保留响应性，又阻止赋值操作。
-
provide('state', readonly(state))—— 注入后inject('state').count++会报错 - 若需修改，应在 provide 端暴露方法（如
increment），而非暴露可变引用本身 - 这样更符合“状态管理契约”，也利于调试和协作
避免在 inject 中重新响应式化（常见误区）
不要对 inject 返回的值再套一层 ref 或 reactive，这不仅多余，还可能切断响应链或引发警告。
- ❌ 错误：
const state = reactive(inject('state')) - ✅ 正确：
const state = inject('state')（前提是 provide 的就是reactive或ref） - 如果 inject 返回
undefined，建议设默认值或检查 provider 是否已正确 setup
组合式 API 中的典型写法
在父组件 setup 中 provide，在子组件（任意深度）setup 中 inject，是最清晰的用法。
- 父组件：
provide('user', userRef)（userRef = ref({ name: 'Alice' })） - 子组件：
const user = inject('user')，模板中直接用{{ user.name }}，响应更新 - 也可提供一个包含状态 + 方法的对象：
provide('auth', { user, login, logout })
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
