父组件传递computedRef至组合式函数时变量丢失响应性

场景说明 #

组件层级：App.vue → ChildComp.vue → GrandChildComp.vue
我做了响应性传递测试：向下传递对象和原始值，通过按钮切换布尔值验证响应性。结果发现：

• ChildComp里用toRef把原始值传给组合式函数，响应性正常
• GrandChildComp里同样用toRef传递时，响应性直接失效

关键差异 #

• GrandChildComp的props是computed返回的ref：<GrandChildComp :mix="computedRef"/>
• 但如果把原始值包裹在reactive对象里传入（<GrandChildComp :mix="props"/>），仅用toRef就能保持响应性

原因解析 #

1. toRef的工作逻辑：它是从响应式对象中提取单个属性并生成对应ref，全程依赖原响应式对象的引用关系。如果传入的不是响应式对象，toRef无法追踪属性变化。
2. computedRef作为props的问题：computed返回的是独立的响应式ref，但当它作为props传给子组件时，子组件拿到的props.mix是一个普通值（props顶层并非响应式对象）。此时用toRef(props, 'mix')，由于props本身不是响应式对象，无法建立依赖追踪，响应性自然断裂。
3. reactive对象传递的区别：当把整个reactive对象作为props传入时，子组件的props会被Vue自动包装成响应式对象。此时toRef(props, 'xxx')能正确关联到原响应式对象的属性，从而保持响应性。

解决方案 #

针对computedRef作为props传入的场景：

• 直接将computedRef整体传递给组合式函数即可，它本身已是响应式ref
• 或者在子组件中使用toRef(props, 'mix')（前提是props的mix为computedRef），不过更推荐直接传递整个ref

内容的提问来源于stack exchange，提问作者walox