Vue Composition API 通过 provide/inject 配合 ref/reactive 实现轻量灵活的组件间依赖注入与状态共享，需用 Symbol 作 key、传递响应式引用、避免解构丢失响应性，并可封装为可复用的组合式函数。
Vue Composition API 处理组件间依赖注入与状态共享，主要靠 provide / inject 配合响应式 API（ref、reactive）实现，既轻量又灵活。它不依赖全局 store，适合中低复杂度场景，也常作为 Pinia 的补充用于局部上下文隔离。
用 provide/inject 实现跨层级依赖注入
父组件通过 provide 暴露数据或函数，任意深度的子组件用 inject 获取，跳过中间层 props 传递。
- 必须在
setup()或<script setup></script>中调用，且provide要在父组件中先执行 - 注入时建议使用 Symbol 作为 key，避免字符串冲突：
const key = Symbol() - 直接注入响应式数据（如
ref或reactive对象），子组件修改会同步反映到源头 - 若注入的是普通对象或原始值，需手动包装为
ref才能保持响应性
配合 reactive/ref 构建可共享的状态对象
把状态定义在 provide 之前，再传入，确保所有注入方拿到的是同一响应式引用。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 用
reactive管理结构化状态（如表单字段、配置项），访问自然：state.count - 用
ref管理独立基础值（如开关状态、ID），修改需加.value - 可在
provide中同时暴露状态和操作方法（如updateUser），形成完整上下文 - 推荐将状态 + 方法封装成一个返回对象的函数，在多个地方复用该“上下文构造逻辑”
封装成可复用的组合式函数（自定义 Hook）
把 provide + 状态 + 方法抽离为独立函数，让逻辑真正模块化、可测试、可按需导入。
立即学习“前端免费学习笔记（深入）”；
- 函数内部创建
reactive或ref，并调用provide - 导出一个
useXXX函数，子组件调用inject获取，或直接导入该函数复用逻辑 - 例如
useTheme()提供主题色和切换方法，useModal()提供显隐控制与内容绑定 - 每个调用实例默认独立；若需共享，就在模块顶层定义状态，而非每次调用新建
注意非响应式陷阱与边界场景
provide/inject 本身不创造响应性，它只是“传递引用”。响应性是否生效，取决于你传进去的是什么。
- 传
ref(123)→ 子组件inject后读写.value是响应的 - 传
{ count: 123 }（普通对象）→ 注入后修改不会触发更新，必须用reactive包裹 - 不要在
inject后对响应式对象做解构赋值（如const { count } = state），会丢失响应性，改用toRefs或始终通过原对象访问 - 不支持服务端渲染（SSR）中跨组件树的注入，需搭配
ssrRef或预取逻辑处理
