目录
需求:根据单价、数量、优惠金额计算/处理之后得出合计金额;
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是最好的选择!