请问vue的计算属性如何应对复杂对象

假设有这样的数据格式
userdata =【
{name:张三，
收入:1000，
支出:500，
}，
{name:李四，
收入:800，
支出:300}
……
】
这种，我用element ui放到表格里，这没问题
但我想加一列利润放进表格，利润等于收入减支出，这种是不是应该用计算属性实现？这种应该怎么写？
教程里的计算属性都是一个属性，这是一个数组，关键还不是独立的数组，是数组对象的一个属性
我其实就想知道，这种情况正常是用计算属性做吗？还是用watch做？又或者其他？
哦，本文只是例子，实际需要计算的不仅是减法，实际需求至少要这个10行左右的函数，所以在html里简单表达式肯定不行。

正常这种数据是从数据库取出来的，要SQL语句实现，封装到JavaBean里面，JavaBean里面加一个属性即可。

个人建议这种表格内的自动计算，用方法会更合适。类似于excel中的公式计算。
计算属性更多的应用场景，应该是处理传入到整个组件的输入型数据。比如，vuex中的数据、sessionStorage里的数据等。
也就是说，计算属性更偏向于某个属性值改变的事件监听，与watch相似。

你可以在数据请求回来之后做一下处理就行

获取到数据后，可以使用循环，给每一个数组里面的对象增加一个key，key的value就是你算好的值，就ok了，无需computed

这个只是在数据渲染的时候计算吧！之后就再也不会重新计算了。所以只需要在 el-table 中添加一个汇总列就行了。再配合 Table-column Attributes 的 formatter 进行计算就可以了。

利润等于收入减去支出，如果收入和支出没有动态变化，利润这一列就不需要用到计算属性或者watch监听，若收入和支出支持动态变化，你的数据是对象类型，就不能用computed,他只用于基本数据类型的计算，对象类型发生，要想监听变化，要用watch,并且加入深度检测。

可以参考以下例子，原理差不多，一般是要通过一个循环取出后再计算

 
<div id="app">
  <h2>总价格: {{totalPrice}}</h2>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        {id: 110, name: 'Unix编程艺术', price: 119},
        {id: 111, name: '代码大全', price: 105},
        {id: 112, name: '深入理解计算机原理', price: 98},
        {id: 113, name: '现代操作系统', price: 87},
      ]
    },
    computed: {
      totalPrice: function () {
        let result = 0;
        for (let i=0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result;
 
        // 1.第一种方式
        /*
        let total = 0
        this.books.forEach(book => {
          total += book.price * book.count
        })
        return total
        */
 
        // 2.第二种方式
        // let total = 0
        // for (let i in this.books) {
        //   const book = this.books[i]
        //   total += book.price * book.count
        // }
        // return total
 
        // 3.第三种方式
        // 高阶函数 filter/reduce/map
        return this.books.reduce((preValue, book) => {
          return preValue + book.price * book.count
        }, 0)
 
        // reduce的补充
        // https://www.cnblogs.com/amujoe/p/11376940.html
      }
    }
  })
</script>

————————————————
版权声明：本文为CSDN博主「coderYYY」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_23073811/article/details/118651507