Vue中计算属性computed

计算属性：计算属性有个缓存机制，在需要使用的数据不发生变化时 ，计算属性即便使用很多次，实际上也只是执行一次，后续的数据使用直接从“缓存”中去获取。而方法是执行一次调用一次

因此，在数据不变的情况下，计算属性效率会更高。

计算属性一般用户去计算比较复杂的运算。

计算属性：声明式，我们只需要将计算的规则告诉计算属性，后续的操作就由它去完成了

方法：命令式，一般配合事件去用，去作为事件的处理程序。

典型的场景：购物车

a. 总体上，计算属性在定义时与方法methods相似，除了属性名不一样以外，其他语法形式一致

b. 计算属性必须要有返回值（必须写return），但是方法可以没有返回值

c. 在使用上，与data中的数据使用的方式是一致的

d. 切记，在使用计算属性的时候不要加“()”

语法：computed: { 名称() { 函数执行   return  },    }

<div class='app'>
        <!-- 计算属性只需要书写名称 -->
        <h2> {{com}} </h2>
        <!-- 函数需要带上括号 -->
        <h2> {{com1()}} </h2> 
       
    </div>
    </body>
<script src='./js/vue.js'></script>
<script>
    new Vue({
        el: '.app',
        data: {
            message: '文本内容',
            // 自定义指令
            directives: '',
        },
        // 函数
        methods:{
            com1(){
                console.log("这是函数");
                console.log(this.message,'函数输出');
            }
        },
        // 计算属性
        computed:{
            // 名称
            com(){
                // 计算属性函数
                console.log("这是计算属性")
                // 在计算属性中return必须要有
                return this.message + '  计算属性输出'
            }
        }
    })
 </script>