Vue中provide/inject传递响应式数据需保持引用完整性：注入方须用toRef/toRefs提取属性或直接访问.value，禁用解构赋值；provide方不可传computed().value等非响应值；修改时只能改属性或.value，不可替换整个引用。
Vue.js 中通过 provide/inject 传递响应式数据（如 ref 或 reactive）时，默认就能自动同步更新，但前提是注入方正确使用了响应式解构或访问方式——否则容易误以为“不更新”。关键不在“策略”，而在于避免常见陷阱。
确保注入的是原始 ref/ reactive 对象，而非解构后的值
如果在 provide 端传入一个 ref，inject 端直接解构其 .value，就会丢失响应性：
- ❌ 错误写法（失去响应）：const { count } = inject('shared') // count 是普通数字，非 ref
- ✅ 正确写法（保持响应）：const shared = inject('shared'); console.log(shared.count.value) 或用
toRef提取响应式引用
推荐用 toRef 或 toRefs 安全提取响应式属性
当 provide 的是一个 reactive 对象（如 const state = reactive({ count: 0 })），inject 后应使用 toRef 而非直接解构：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- const state = inject('state')
-
const count = toRef(state, 'count') —— 这样
count是响应式 ref，模板中{{ count }}会随变化自动更新 - 若需多个字段，可用
toRefs(state)，返回一个由 ref 组成的对象
避免在 provide 中返回计算属性的 .value
如果 provide 的是 computed(() => ...).value，得到的是普通值，不具备响应性：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：provide('msg', computed(() => name.value + '!').value)
- ✅ 正确：provide('msg', computed(() => name.value + '!')) —— 注入方接收后直接用
msg.value，即可响应式读取
跨组件层级修改时，确保修改发生在响应式对象上
即使注入的是 ref 或 reactive，若子组件错误地覆盖整个引用（如 shared = newRef），父级将无法感知。应始终修改属性或 .value：
- ✅ 修改值：shared.count.value++ 或 shared.state.name = 'new'
- ❌ 替换引用：shared = ref(42)（这不会影响 provide 方的原始 ref）
