Vue的provide/inject需配合ref或reactive才能实现响应性：提供响应式对象、避免解构破坏代理、用Symbol作key防冲突，并推荐组合式函数封装状态逻辑。
Vue 的 provide/inject 本身不自动赋予响应性，它只是“传递引用”。要让后代组件能响应数据变化，关键在于：你提供的值必须是 Vue 的响应式对象（ref 或 reactive），且在使用时保持其响应式结构不被破坏。
必须用 ref 或 reactive 包裹原始数据
直接 provide 普通对象、字符串或数字，注入后修改不会触发更新：
- ❌ 错误示范：
provide('count', 0)或provide('user', { name: '李四' })—— 这些是非响应式值，inject 后赋值或改属性无效 - ✅ 正确做法：
provide('count', ref(0))或provide('user', reactive({ name: '李四' })) - 若提供的是函数，也建议放在响应式对象里（如
reactive中的方法），避免 this 绑定丢失；单独 provide 函数时，调用时的this指向当前组件实例，需留意上下文
注入后不要解构破坏响应性
inject 返回的是响应式代理，解构会丢失响应连接：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- ❌ 危险写法：
const { name, age } = inject('user')—— 解构出的name是普通值，修改它不触发更新 - ✅ 推荐方式：
const user = inject('user')，模板中用{{ user.name }}，逻辑中用user.name = '王五' - Vue 3.4+ 支持对
reactive对象进行安全解构（带响应式保留），但为兼容性和可读性，仍建议优先直接使用响应式对象本身
配合组合式函数封装状态逻辑
把响应式状态和操作方法一起封装，既保证响应性，又提升复用性与类型安全：
立即学习“前端免费学习笔记（深入）”；
- 在
src/composables/useCounter.js中定义：
import { reactive } from 'vue'
export function useCounter() {
const state = reactive({ count: 0 })
const increment = () => state.count++
return { ...state, increment } // 注意：展开后仍是响应式属性
} - 祖先组件提供：
provide('counter', useCounter()) - 后代组件注入：
const counter = inject('counter')，可直接用counter.count和counter.increment()
用 Symbol 做 key 避免命名冲突
字符串 key 容易重复，尤其在大型项目或插件中：
- ✅ 推荐：
const counterKey = Symbol('counter')，然后provide(counterKey, ...)和inject(counterKey) - TypeScript 下还能配合泛型精准推导类型：
inject(counterKey) as ReturnType<typeof usecounter></typeof> - 可将所有 Symbol key 集中定义在
src/injectKeys.ts中统一管理
