computed（计算属性）和methods（方法）的区别

methods方法

在 methods 中定义方法

我们可以使用 methods 属性给 Vue 定义方法，methods 的基本语法：

 new Vue({
    el:'',
    data:{},
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔
        方法名:function(){}
   }
});

在方法中访问属性

在 methods 方法中访问 data 的数据，可以直接通过this.属性名的形式来访问。

<script>
  new Vue({
    el: '#app',
    data:{
          number: 100  
    },
    methods:{
      show: function(){
        console.log(this.number);
      }
    }
  });
</script>

如果是在 Vue 构造函数外部，可以使用 vm.方法名 定义或调用方法，还可以通过 vm.$data.属性名 来访问 data 中的数据。

computed计算属性

计算属性是什么

写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用

什么时候要用计算属性

计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。
对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性

计算属性整个过程

当第一次调用get()之后，Vue实例身上会出现一个与计算属性同名的属性，该属性的值就是调用get()返回的值；
当再次调用get之后，Vue把get返回的值赋值给这个缓存属性；
缓存属性：因此当不是初次访问计算属性时且计算属性所依赖的数据没有发生变化时,Vue实际上用的是这个属性，而不是再次执行get()。

区别

1、计算属性和methods的执行结果都是相同的

2、当计算属性没有依赖data中的数据时，第一次使用计算属性时，会把第一次的结果进行缓存，后面再次使用计算属性，都会去第一次的结果中进行查找

3、methods方法，每调用一次，就会触发一次

4、计算属性的用法与data中的数据用法一样，因此计算属性在使用时，不加 ( )

5、methods方法在调用时，( ) 可加可不加

6、计算属性具有缓存功能，methods方法没有

  <div id="app">
        <p>methods</p>
        <p>{{fn1()}}</p>
        <p>{{fn1()}}</p>
        <p>{{fn1()}}</p>
        <br>
        <p>计算属性</p>
        <p>{{fn2}}</p>
        <p>{{fn2}}</p>
        <p>{{fn2}}</p>
   </div>
   <script src="./vue.js"></script>
   <script>
     new Vue({
        el:"#app",
        data:{
        },       
        methods:{
            fn1(){
                console.log('methods方法');
                return new Date();
            }
        },
         computed:{
            fn2(){
                console.log('计算属性');
                return new Date();
            }
        }
    });
    </script>