vue动态监听计算对象中的属性_vue computed监听对象-优快云博客

web开发过程中，经常遇到要自动计算的问题，比如输入几个金额，自动计算出总和，或者计算出折扣什么的。还有更复杂的，动态添加删除数组，数组中每个对象都有自动计算的小计，数组外还有总和的计算，那就需要用到computed和watch了。

先来名词解释一下吧！

computed是计算属性，注意是属性，和data属性都是变量，不能重名，用法和data相同。计算属性函数内变量变化，会自动重新计算结果返回。计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果。

watch是侦听器，与data中的属性同名，当属性的值发生改变的时候，侦听器被触发执行。一个侦听器对应data中的一个属性，当属性发生变化时触发侦听器的执行。

两者的区别：

1）computed适合用于计算依赖多个属性的情况；watch适合用于计算依赖一个属性的情况

2）computed有return；watch没有

3）watch中有属性变化后的val参数，computed没有参数

4）computed函数内部数据没有变化则直接从缓存中取结果，但数据变化则重新计算，每次计算需要重新创建变量缓存结果；watch则是监听到变化直接计算，不需要创建变量保存结果。所以对于数据多次变化，需要多次计算的情况，computed的开销会更大，更适合使用watch；而数据多次被使用，但其依赖变化较少，获取数据直接从缓存中取，则更适合computed

好了，该说正事了！需求是这样的，新增表单中ruleForm中多个属性，其中一个是可以动态增加和删除的数组ruleForm.specList，数组中装的是对象，如下图。标准价格是是前面选择带出来的数值，数量和销售单价是输入的数值，小计和折扣则是根据前面的数字自动计算出来的。小计=销售单价*数量，折扣=销售价格/标准价格*100。

然后，这个ruleFrom还有另一个属性，ruleForm.productTotal，如下图，产品合计也是需要自动计算的，是specList中所有小计的和。

其实就是监听ruleForm.specList的数据变化，然后计算结果，更新数据。这里首先不能直接用computed，因为ruleForm是data中的属性，已经不能用在computed中了。也不能直接用watch，因为watch，因为我们是想要监听到ruleForm.specList的数据变化才对数据进行计算。这种情况就可以利用computed做中间层，在computed中定义属性ruleFormSpecList，返回ruleForm.specList，然后在watch中监听ruleFormSpecList，具体代码如下

  computed: {
    ruleFormSpecList(){
      return this.ruleForm.specList
    },
  },
  watch: {
    ruleFormSpecList:{
      handler(){
        let pTotal = Number(0);
        this.ruleForm.specList.forEach(item=>{
          //计算小计
          if (item.sellPrice && item.sellNum){
            this.$set(item, "sellTotal", Number(item.sellPrice * item.sellNum))
          }
          //计算折扣
          if (item.sellPrice && item.basicPrice){
            this.$set(item, "discount", Number((item.sellPrice / item.basicPrice * 100).toFixed(2)))
          }
          //计算产品合计
          if (item.sellTotal){
            pTotal+=Number(item.sellTotal)
          }
        })
        //赋值产品合计
        if (pTotal > 0){
          this.ruleForm.productTotal = pTotal
        }
      },
      //因为要监听对象内部的属性，所以要用deep：true
      deep: true
    }
  },