计算属性 – computed

模板中放入太多的逻辑（方法）会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

计算属性定义在Vue对象中，通过关键词computed属性对象中定义一个个函数，并返回一个值，使用计算属性时和data中的数据使用方式一致。

注意：只要依赖的数据源不发生改变，计算属性里的对应方法就只被调用1次，其它时候被调用时则使用缓存。提高效率。

<div id="app">
    <!-- 方法调用 -->
    {{fn()}}
    {{fn()}}
    <!-- 计算属性调用 -->
    {{cfn}}
    {{cfn}}
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "现在是北京时间：2020-12-08 10:36:33",
        },
        methods: {
            fn: function () {
                console.log('走了方法');
                return this.msg;
            },
        },
        computed: {
            cfn: function () {
                console.log('走了计算属性');
                // 计算属性中可以获取到this的
                return this.msg;
            },
        },
    });
</script>