Vue3中为何得到null数组而非0数组？计算属性问题咨询

核心错误：computed计算属性返回的是ref响应式对象，不能直接用数组下标[k]访问元素，必须通过.value获取计算后的实际数组。

错误原理 #

salesTotal和cogsTotal是computed创建的响应式对象，并非原生数组。直接写salesTotal[k]是在访问这个ref对象的第k个属性（而非数组元素），结果为undefined，两个undefined相加后最终得到null（Vue响应式包装的表现）。

修正后的代码 #

const salesTotal = computed(() => {
  let totalSalesAmount = new Array(numberOfPeriods).fill(0);
  return totalSalesAmount;
});

const cogsTotal = computed(() => {
  let totalCOGSAmount = new Array(numberOfPeriods).fill(0);
  return totalCOGSAmount;
});

const grossMarginTotal = computed(() => {
  // 先通过.value获取计算后的原生数组
  const salesArr = salesTotal.value;
  const cogsArr = cogsTotal.value;
  let grossMarginAmount = [];
  for (let k = 0; k < numberOfPeriods; k++) {
    grossMarginAmount[k] = salesArr[k] + cogsArr[k];
  }
  return grossMarginAmount;
});

也可以用更简洁的数组映射写法：

const grossMarginTotal = computed(() => {
  return salesTotal.value.map((sale, idx) => sale + cogsTotal.value[idx]);
});

修改后，grossMarginTotal会正确返回[0, 0, 0, 0, 0]。

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