计算属性

什么是计算属性？

计算属性的重点突出在属性上，首先它是一个属性，其次这个属性有计算的能力，计算指的就是函数；

它是一个能将计算的结果缓存的属性（将行为转化成了静态的属性）----》可以理解成缓存

是vue的一个特性

代码实现

<div id="app">
    <p>getDate1-methods： {{getDate1()}}</p>	<!--调用普通方法，方法名必须加括号调用-->
    <p>getDate1-computed： {{getDate2}}</p>	<!--调用普通方法，以属性的方式调用-->
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data:{
            message: "Hello henjie"
        },
        methods: {
            getDate1: function (){
                return Date.now(); //返回当前时间戳
            }
        },
        //计算属性：相当于缓存
        computed: {
            getDate2: function (){
                this.message;
                return Date.now();
            }
        }
    });
</script>

• methods 和 computed 里的东西不能重名
• methods 定义普通方法，调用时需要带括号，computed 定义计算属性，调用属性时不需要带括号。

结果刨析

vue.getDate1()
1618219172446	
vue.getDate1()	
1618219174241		//发现普通方法一直在刷新
vue.getDate2
1618219154119
vue.getDate2
1618219154119		//发现计算属性生成后保持不变
vue.message = 'henjie'	//模拟计算缓存的值发生变化的时候
"chixin"
vue.getDate2
1618219191933		//发现当计算属性中的值改变后，会被刷新

调用普通方法的时候，每次都需要进行计算，计算过程会产生系统的开销，如果这个结果并不需要经常变化的话，便可以考虑将这个结果缓存起来，这时便可以采用计算属性。

程序每次调用计算属性直接从缓存中拿取，不需要重新计算，大大的提高了效率，只有在值发生变化的时候，才会刷新缓存。

总结：计算属性主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销。