计算属性

声明

本文为多位博主原创文章整合，仅用作个人学习，特此声明

参考文章链接：

计算属性

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

通过代码理解计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <p>currentTime1:{{currentTime1()}}</p>
    <p>currentTime2:{{currentTime2}}</p>
</div>

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
          message:"pan"
        },
        methods:{
            currentTime1:function(){
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function(){
                //计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>
</html>

注意：methods中的方法和computed里的属性不能重名！

说明：

methods：定义方法，调用方法使用currentTime1()， 需要带括号
computed：定义计算属性，调用属性使用currentTime2， 不需要带括号

this.message是为了能够让currentTime2观察到数据变化而变化
如果在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”xxx"改变下数据的值，再次测试观察效果!
- 这是当前运行结果
- 这是改变数据以后的运行结果
  
  在这里我没有点击重新运行，只是在控制台改变了message的值
  
  如下图所示，运行结果发生了相应的改变

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

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。