inject 本身不创建响应式，需确保 provide 的值是 ref/reactive/computed 等响应式对象；子组件应正确访问（如用 .value 或 torefs），避免解构丢失响应性，并注意 provide 时机与命名冲突。
在 Vue 3 中，inject 本身不会自动让注入的值变成响应式——它只是获取由 provide 提供的原始值。如果祖先组件提供的数据是响应式的（比如用 ref、reactive 或 computed 创建的），那注入后依然保持响应式；但如果提供的是普通对象或原始值，注入后就不是响应式的。
确保 provide 的值是响应式的
祖先组件必须用响应式 API 包裹数据再提供，否则子组件即使 inject 也拿不到响应式更新：
- 用
ref或reactive创建状态，再通过provide暴露 - 避免直接
provide('key', { count: 0 })—— 这样注入后修改不会触发视图更新 - 推荐将响应式对象整个提供，或封装成
computed返回只读/可写代理
inject 后正确使用响应式值
子组件中 inject 得到的如果是 ref，需用 .value 访问；如果是 reactive 对象，可直接解构属性（但注意解构会丢失响应性）：
- 安全做法：始终通过原对象访问属性，如
injectedState.count - 若需解构，用
toRefs或toRef保持响应性 - 不建议对
inject结果再次ref()包裹——这会切断与源头的响应联系
处理跨层级响应式通信的常见陷阱
响应式失效往往不是 inject 的问题，而是提供方式或消费方式不当：
- 祖先组件在
setup中提供，但未在onBeforeMount或之后调用provide，可能导致子组件注入时值为undefined - 多个同名
provide被覆盖：靠最近的祖先优先，注意命名冲突 - 异步场景下，
provide的值可能初始为空，注入后需配合v-if或watch等待就绪
配合 readonly 防止意外修改
如果只想让后代读取状态，祖先组件可用 readonly 包装后再 provide：
provide('state', readonly(reactive({ count: 0 })))- 子组件仍能响应式读取，但尝试赋值会触发警告（开发模式下）
- 需要可写接口时，可额外提供一个修改函数，如
provide('updateCount', (n) => {...})
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
