Vue计算属性

计算属性

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

<div id="app">
    <p>currentTime1={{currentTime1()}}</p>
    <p>currentTime2={{currentTime2}}</p>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:"hello,kuangshen"
        },
        methods: {
            currentTime1: function (){
                return Date.now();//返回时间戳
            }
            },
        computed:{ //计算属性:methods和computed 中的方法名可以重名
            //重名之后，只会调用methods的方法
            currentTime2: function (){
                this.message;//mybatis
                return Date.now();//返回时间戳
            }
        }
    })
</script>

注意：methods和computed里的东西不能重名

说明：

• methods：定义方法， 调用方法使用currentTime1()， 需要带括号

• computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化

• 如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”q in jiang"， 改变下数据的值，再次测试观察效果!

结论：

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