[vue]计算属性

计算属性

计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

<div id="app">
    <p>时间戳:{{currenttime1()}}</p>
    <p>时间戳:{{currenttime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        },
        methods: {
            //在控制台中调用vm.currenttime1(),获得的时间是实时的
            currenttime1: function () {
                return Date.now();
            }
        },
        computed: {
            //在控制台中调用vm.currenttime2,数据是不会变的,类似于缓存
            currenttime2: function () {
                return Date.now();
            }
        }
    });
</script>

结论：

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;