Vue3+TypeScript数组列求和：最优方法选择及代码实现

问题1：计算属性 vs forEach 哪种更优？ #

首先纠正一个概念：计算属性是Vue的响应式缓存机制，而forEach是数组遍历方法，两者并非同一维度的对比。

• 计算属性的核心优势是缓存：只有当依赖的响应式数据（比如你的发票数组）发生变化时，才会重新计算；页面刷新或无关数据变化时不会重复执行，完全匹配你“避免重复计算”的需求。
• forEach只是遍历数组的一种方式，本身没有缓存能力。如果不用计算属性，每次页面渲染都要重新遍历求和，反而会增加不必要的计算开销。
  另外，求和场景下Array.reduce()比forEach更简洁、语义化更强，代码可读性更高，日常业务场景下两者效率差异可以忽略。所以最优方案是用Vue3的计算属性结合reduce来实现求和。

问题2：Vue3+TypeScript 代码实现 #

先定义类型接口保证类型安全，再通过计算属性实现求和：

1. 定义TypeScript类型接口 #

// 单个发票项的类型
interface InvoiceItem {
  id: number;
  Invoice_Number: number;
  Total_Price: string;
  Total_Tax1: string;
  Grand_Total: string;
}

// 接口返回的整体数据类型
interface InvoiceResponse {
  current_page: number;
  data: InvoiceItem[];
}

2. 组件完整实现 #

<script setup lang="ts">
import { ref, computed } from 'vue';

// 模拟接口返回的响应数据
const invoiceData = ref<InvoiceResponse>({
  current_page: 1,
  data: [
    { id: 1, Invoice_Number: 1, Total_Price: "10.00", Total_Tax1: "4.50", Grand_Total: "14.50" },
    { id: 2, Invoice_Number: 2, Total_Price: "10.00", Total_Tax1: "2.50", Grand_Total: "12.50" }
  ]
});

// 计算总计的计算属性
const totals = computed(() => {
  return invoiceData.value.data.reduce((acc, item) => {
    // 关键：将字符串类型的金额转为数字后再计算（这是你之前用reduce出错的大概率原因）
    const tax1 = parseFloat(item.Total_Tax1);
    const grandTotal = parseFloat(item.Grand_Total);
    
    return {
      totalTax1: acc.totalTax1 + tax1,
      totalGrandTotal: acc.totalGrandTotal + grandTotal
    };
  }, { totalTax1: 0, totalGrandTotal: 0 }); // 初始累加值
});
</script>

<template>
  <div>
    <p>Total Tax1: {{ totals.totalTax1.toFixed(2) }}</p>
    <p>Grand Total: {{ totals.totalGrandTotal.toFixed(2) }}</p>
  </div>
</template>

关键说明 #

• 必须将字符串类型的金额转为数字（parseFloat），否则会出现字符串拼接的错误结果。
• 计算属性totals会自动追踪invoiceData的变化，仅当发票数组更新时才重新计算总和。
• 用toFixed(2)保证金额显示为两位小数，符合财务数据展示规范。

内容的提问来源于stack exchange，提问作者Handsome.Paul