vue中的计算属性和method方法中的计算对比

应用场景：购物城的计算、移动端工时计算,,,,,,

性能对比：

computed的计算效率比methods的高  ，具有缓存的作用  

在调用多次的时候methods会调用多次  computed就只会用缓存用一次

methods 方法记得带小括号 meth_total()

<template>
    <div>
        <div>总价为：{{com_total}}</div>
        <br>
       <div> 总价为：{{meth_total()}}</div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            arr: [
                { name: 'VUE.js1', price: 99, count: 3 },
                { name: 'VUE.js2', price: 39, count: 2 },
                { name: 'VUE.js2', price: 49, count: 1 },
            ],
 
        }
    },
    computed: {
        // total 在这里是属性名 ，我们自己起的
        // 计算属性的函数中需要有返回值，在页面中{{total}}就是这个返回值
        com_total() {
            console.log("计算属性中的total---------------");
            let ret = this.arr.reduce(function (pre, current) {
                return pre + current.price * current.count;
            }, 0)  //pre 初始上一个值为0
            return ret;
        }
    },
    methods: {
        meth_total() {
            console.log("方法中的total----------------");
            let ret = this.arr.reduce(function (pre, current) {
                return pre + current.price * current.count;
            }, 0)
            return ret;
        }
    }
}
</script>
 
<style lang="less" scoped>
    
</style>