基于Props的Computed计算属性未触发计算，该如何解决？

你的代码存在两个核心问题，导致computed从未执行：

1. 未正确获取响应式的props对象，直接引用task无法被Vue的响应式系统追踪
2. 缺少空值安全判断，若props中的属性未初始化可能导致代码报错中断

修正后的代码 #

interface Task {
  paymentDetail: {
    products: { amount: number }[];
  };
}

interface Props {
  task: Task;
}

// 1. 用defineProps声明并获取响应式props
const props = defineProps<Props>();

const totalPrice = computed(() => {
  // 2. 空值安全判断，避免属性不存在时报错
  if (!props.task?.paymentDetail?.products) return 0;

  // 3. 依赖响应式的props.task，同时修正reduce参数顺序（原顺序不影响结果但不符合规范）
  return props.task.paymentDetail.products
    .map(p => p.amount)
    .reduce((acc, currentAmount) => acc + currentAmount, 0);
});

关键说明 #

• 必须通过defineProps获取props对象：Vue3的响应式系统只会追踪props对象下的属性访问，直接使用未绑定的task变量无法触发依赖收集，自然不会执行computed逻辑。
• 增加空值判断：当组件初始化时task可能还未传入，或者paymentDetail/products属性不存在时，提前返回默认值0，避免运行时错误导致computed逻辑中断。
• 修正reduce参数顺序：原代码中reduce((partialSum, acc) => ...)的参数顺序不符合reduce的标准用法（第一个参数是累加器acc，第二个是当前元素），虽然计算结果可能一致，但调整后更易读且符合规范。

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