Vue3中作为prop传递的原始类型ref的响应性疑问

问题1：原始类型ref传props后，子组件检测不到ref/reactive？ #

创建原始类型的ref，父组件中isRef(foo)返回true，但作为prop传给子组件后，isRef(props.foo)和isReactive(props.foo)均返回false，原因是什么？

解答 #

Vue在处理props传递时会自动解包ref：当你把ref作为prop传给子组件，子组件接收到的props.foo实际上是ref的.value值（也就是原始类型本身，比如例子里的数字），而非ref对象。所以props.foo是普通原始值，自然无法被isRef或isReactive检测为响应式对象。

另外要注意：defineProps返回的props对象本身是Vue创建的响应式Proxy，所以isReactive(props)会返回true，但单个原始类型的props值只是普通值，不具备响应式包装。

问题2：props.foo非ref/reactive，为何watcher仍能触发？ #

尽管props.foo既不是ref也不是reactive，子组件中监听它的watcher仍能在值变化时触发，这是为何？

解答 #

核心原因是整个props对象是响应式的：

• defineProps返回的是Proxy包装的响应式对象，父组件更新ref值时，子组件的props会被同步更新，这个更新会被Proxy捕捉。
• 当使用watch(() => props.foo)时，这个getter函数会访问props.foo，触发Vue的依赖收集机制，将watcher与props.foo的更新关联起来。因此当父组件修改值时，子组件的watcher能检测到变化并触发。
• 直接watch(props)则是监听整个props对象的变化，只要任意props更新都会触发回调。

问题3：原始类型传入组合式函数需用toRef，ref/reactive不用？ #

将foo传入子组件的组合式函数时，必须通过toRef传递才能触发内部watcher，而ref/reactive对象无需此步骤，为何原始类型需要额外操作？

解答 #

组合式函数要监听值的变化，依赖值具备响应式引用：

• 直接传递props.foo（原始类型）时，传递的是值的副本，组合式函数拿到的是普通原始值，无法追踪其后续变化。
• toRef(props, 'foo')会创建一个与props.foo绑定的ref，这个ref的.value会同步props.foo的更新，且保持响应式关联，组合式函数监听这个ref就能捕捉到变化。
• 若传递的是ref或reactive对象，传递的是对象引用，组合式函数能直接通过Vue的响应式系统追踪对象内部的变化，无需额外包装。

代码片段参考 #

Parent.vue

let foo = ref(0);
function changeFoo() {
  foo.value++;
}
  
console.log("parent check is reactive?", isReactive(foo)); // false
console.log("parent check is ref?", isRef(foo)); // true

watch(foo, (value, oldValue) => {
  console.log("foo changing from", oldValue, "to ", value);
});

Child.vue

const props = defineProps<{
  foo: number;
}>();

console.log("child check is reactive?",isReactive(props), isReactive(props.foo)); // true false
console.log("child check is ref ?",isRef(props), isRef(props.foo)); // false false
  
watch(props, (value, oldValue) => {
  console.log("props changing from", oldValue, " to ", value);
});
 
watch(()=>props.foo, (value, oldValue) => {
  console.log("props.foo changing from ", oldValue, " to ", value);
});

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