Vue 中methods和computed属性区别

两者从定义属性的角度出发都是定义函数，但是methods中，函数需要手动执行，而computed中，函数则被称为属性，并且可以理解为缓存

同时定义获取当前时间函数于methods中和computed中

    var vm = new Vue({
    
    
            el: "#app",
            methods:{
    
    
                time1: function(){
    
    
                    return Date.now();
                }
            },
            computed: {
    
    
                time2: function(){
    
    
                    this.message; //测试更改缓存
                    return Date.now();
                }
            },
            data:{
    
    
                message: "aa"
            }
        })

在盒子中调用

   <div id="app">
        time1:{
    
    {
    
    time1()}}
        <br/>
        time2:{
    
    {
    
    time2}}
    </div>

页面中展示结果

2.在控制台中测试两个属性的区别

不难发现time1是通过方法调用，每一次的调用都会重新计算结果，而time2（computed）属性，则是通过第一次计算出来的属性进行了缓存（注意：computed中的属性不是函数！否则会报错）

3.测试修改time2属性的缓存

修改message的属性

属性值改变