computed与watch、methods的区别，以及运用场景！

目录

需求：根据单价、数量、优惠金额计算/处理之后得出合计金额；

export default {
  data() {
    return {
      discounts: 50, //优惠券
      Money: null, //单价
      Num: null, //数量
      Total: 0 //合计
    };
  },
};

---

这时候至少有四种方式可以实现，我们很容易把插值表达式、computed（计算属性）、watch（侦听器）、methons（方法）这四种混着用； 

computed（计算属性）实现：

export default {
  data() {
    return {
      discounts: 50, //优惠券
      Money: null, //单价
      Num: null //数量
      //   Total: 0 //合计
    };
  },
  computed: {
    Total() {
      if (!this.Money || !this.Num) return 0;
      return this.Money * this.Num - this.discounts >= this.discounts ? this.Money * this.Num - this.discounts:0;
    }
  }
};

computed（计算属性）VS  methods（方法）：

methods:{
    Total() {
      if (!this.Money || !this.Num) return 0;
      return this.Money * this.Num - this.discounts >= this.discounts ? this.Money * this.Num - this.discounts:0;
    }
  }

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在单价/数量发生改变时才会去计算合计金额的值。这就意味着只要 Money / Num还没有发生改变，多次访问 Total计算属性会立即返回之前的计算结果，而不必再次执行函数。但是方法则会在每次重新渲染时再次被调用！

 computed（计算属性）VS  watch（侦听器）：

export default {
  data() {
    return {
      discounts: 50, //优惠券
      Money: null, //单价
      Num: null, //数量
      Total: 0 //合计
    };
  },
  watch:{
      Money(){  //监听单价
         this.Total = this.Money * this.Num - this.discounts >= this.discounts ? this.Money * this.Num - this.discounts:0;
      },
      Num(){   //监听数量
         this.Total = this.Money * this.Num - this.discounts >= this.discounts ? this.Money * this.Num - this.discounts:0;
      }
  },
};

首先，使用侦听器写法上比较繁琐，其次性能上来讲，监听器开销是比较大的，watch通常来处理/监听比较复杂的对象属性，最简单的理解就是当一个数据影响多个数据的时候watch是最好的选择！