向Vue 3组合式函数传递props无响应性问题

你遇到的问题核心是没有正确访问Ref对象的原始值，导致computed无法追踪到prop的变化。

问题原因 #

通过toRefs(props)解构出来的aProp是一个Vue3的Ref响应式对象，而非原始字符串值。组合式函数里直接拿这个Ref对象和空字符串比较，没有访问它的.value属性，computed的依赖收集机制无法识别到这个响应式依赖，因此prop变化时computed不会重新执行。

修复方案 #

修改组合式函数，在computed回调中访问Ref对象的.value属性：

import { computed } from 'vue';
function useComposable(aProp) {
  const aHasChanged = computed(() => {
    // 必须访问Ref的.value来获取原始值
    return aProp.value === '';
  });

  return {
    aHasChanged,
  };
}

export { useComposable };

组件中的代码无需修改，因为toRefs(props)已经将prop转换为响应式的Ref对象，只要在组合式函数中正确访问.value，computed就能正常追踪prop的变化，当aProp更新时，aHasChanged会自动重新计算。

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