Vue.js 中 provide/inject 本身不自动创建响应式，但能维持已有的响应式关系；必须用 ref、reactive 或 computed 包裹数据才能保持响应，直接提供普通对象或原始值将无法触发更新。
Vue.js 中 provide/inject 本身不自动创建响应式，但能维持已有的响应式关系——关键在于你提供的值是否是响应式对象（ref、reactive 或 computed）。
provide 必须传响应式数据才能保持响应
如果直接 provide 普通 JS 对象或原始值（如字符串、数字），后代组件 inject 后修改它不会触发更新，因为 Vue 无法追踪非响应式数据的变化。
- ✅ 正确：用 ref 或 reactive 包裹后再 provide
- ❌ 错误：直接 provide { theme: 'dark' } 这样的普通对象
- ⚠️ 注意：provide 函数返回的对象中，this 指向组件实例，但 data 属性若未被 ref/reactive 包装，依然不是响应式
inject 获取后仍需按响应式规则使用
inject 返回的值，其响应性取决于 provide 时的包装方式：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 若 provide 的是 ref，inject 得到的就是该 ref，模板中写
{{ theme.value }}或在 script 中通过.value读写 - 若 provide 的是 reactive 对象，inject 后可直接解构属性（Vue 3.4+ 支持深层响应式解构），如
const { color, name } = user - 若 inject 返回 undefined（未找到或没设默认值），且你想赋默认响应式值，需手动用 ref 包裹，否则会丢失响应性
方法与计算属性也能响应式传递
provide 不仅能传数据，还能传函数和 computed：
立即学习“前端免费学习笔记（深入）”；
- 传函数（如
setColor）：只要函数内部操作的是响应式数据，调用后视图就会更新 - 传 computed：inject 后得到的是一个 ref，值随依赖变化自动更新
- 组合使用：常见模式是 provide 一个包含 ref + 方法的对象，后代统一管理状态逻辑
Symbol key 更安全，避免命名冲突
字符串 key 在大型项目中容易重复，尤其跨模块时。推荐用 Symbol 定义唯一 key：
const themeKey = Symbol('theme')- provide(themeKey, { color: ref('blue'), setColor })
- inject(themeKey) —— 类型更明确，TS 中还可配合泛型约束
