Vue计算属性适合表格实时统计总价和数量，因其自动响应、缓存结果、避免重复计算；需用$set或splice确保响应式更新，配合过滤时基于filteredData计算，大数据量可考虑防抖或手动维护。
Vue 计算属性非常适合在表格中实时统计总价和数量，因为它会自动响应数据变化、缓存结果、避免重复计算，比在模板中写表达式或用 v-on 手动更新更简洁可靠。
用计算属性统计表格中的总数量和总价
假设你有一个商品表格，每行有 name、price、quantity 字段。你希望在表格底部显示「总数量」和「总金额」：
在 Vue 组件的 computed 选项中定义两个计算属性即可：
computed: {
totalCount() {
return this.tableData.reduce((sum, item) => sum + (parseInt(item.quantity) || 0), 0)
},
totalPrice() {
return this.tableData.reduce((sum, item) => {
const price = parseFloat(item.price) || 0
const qty = parseInt(item.quantity) || 0
return sum + price * qty
}, 0)
}
}模板中直接使用：
立即学习“前端免费学习笔记（深入）”；
共 {{ totalCount }} 件，合计 ¥{{ totalPrice.toFixed(2) }}
确保计算属性能响应深层变更（如 quantity 修改）
Vue 2 中，对象新增属性或数组索引赋值不会触发响应式更新（如 this.tableData[0].quantity = 5）。要让计算属性正确更新，需用以下方式之一：
- 用
this.$set(this.tableData[0], 'quantity', 5)更新单个字段 - 用
Vue.set()（Vue 2）或直接赋值（Vue 3 响应式代理默认支持） - 对整行数据做替换：
this.tableData.splice(index, 1, { ...oldItem, quantity: 5 })
推荐在编辑单元格时统一用 @change 或 @input 触发带校验的更新方法，再由计算属性自动汇总。
配合过滤/搜索时仍保持统计准确
如果表格支持搜索过滤（比如按商品名筛选），不要直接修改 tableData 原数组，而应保留原始数据，并用另一个计算属性生成过滤后列表：
computed: {
filteredData() {
return this.tableData.filter(item =>
item.name.toLowerCase().includes(this.searchKey.toLowerCase())
)
},
totalCount() {
return this.filteredData.reduce((sum, item) => sum + (parseInt(item.quantity) || 0), 0)
},
totalPrice() {
return this.filteredData.reduce((sum, item) => {
const price = parseFloat(item.price) || 0
const qty = parseInt(item.quantity) || 0
return sum + price * qty
}, 0)
}
}这样统计始终基于当前可见数据，逻辑清晰且可维护。
性能优化：大数据量下避免频繁遍历
当表格行数上千时，每次响应式变化都执行 reduce 可能卡顿。可考虑：
- 用
watch监听tableData的变化，手动维护totalCount和totalPrice响应式变量（适合增删改较明确的场景） - 对
tableData使用shallowRef+computed（Vue 3）减少深度监听开销 - 仅在用户停止输入 300ms 后再更新统计（防抖），适用于搜索+统计联动
但多数业务表格（
