Vue3子组件computed不响应props变更，状态未更新求助

1. 优先检查answered的状态 #

你的status计算逻辑是先判断answered，再判断selected：

const status = computed(() => {
  if(answered) return "done" // 此判断优先级最高
  if(selected) return "selected"
  return "default"
})

如果点击后selected变为true但status仍为"default"，首先确认answered是否为false。只要answered为true，无论selected是什么值，status都会返回"done"，不会走到selected的判断分支。

2. 修正调试代码的打印方式 #

status是一个computed ref对象，直接打印status只会输出RefImpl包装对象，无法看到实际计算值。需要打印status.value才能获取当前状态字符串：

onUpdated(() => {
  console.log("updated")
  console.log(selected, answered, status.value) // 补充answered和status.value的打印
})

3. 确认父组件的状态更新逻辑 #

确保父组件修改selected状态时，是通过响应式变量（比如ref或reactive）进行的，而非直接修改普通变量。只有响应式变量的更新才会触发子组件props更新，进而触发computed重新计算。

简化写法（可选） #

你可以把cardClasses合并为一个computed，减少嵌套层级，逻辑更直观：

const cardClasses = computed(() => {
  let statusClass = classes.default
  if (answered) {
    statusClass = classes.done
  } else if (selected) {
    statusClass = classes.selected
  }
  return `${classes.base} ${statusClass}`
})

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