Vue中computed和methods的区别

Vue中computed和methods的区别

computed和methods的区别：

• computed是属性调用，而methods是函数调用
• computed带有缓存功能，而methods不是
• 换句话说，computed只有在绑定的属性值变化的时候才会调用，而methods，在绑定的属性值变化的时候，所有调用的该方法的地方都会重新调用这个方法

例子

<div id="app8">
   <p>
       {{message8}}
   </p>
   <p>
       {{computeMsg}}
   </p>
   <p>
       {{computeMsg}}
   </p>
   <p>
       {{computeMsgMethod()}}
   </p>
   <p>
       {{computeMsgMethod()}}
   </p>
   <input v-model="message8" type="text" />
</div>

var app8 = new Vue({
    el: '#app8',
    data: {
        message8: "origin data"
    },
    computed: {
        computeMsg: function(){
            console.log('计算属性, 依赖于缓存, 只有message8发生变化才会再次执行')
            return this.message8+ 'from computed';
        }
    },

    methods: {
        computeMsgMethod: function(){
            console.log('方法名字, 调用一次执行一次');
            return this.message8+'from methods';
        }
    }
});

当页面第一刷新的时候:

计算属性, 依赖于缓存, 只有message8发生变化才会再次执行
方法名字, 调用一次执行一次
方法名字, 调用一次执行一次

当input输入框变动时:

计算属性, 依赖于缓存, 只有message8发生变化才会再次执行
方法名字, 调用一次执行一次
方法名字, 调用一次执行一次

可以发现，computed虽然在两处被调用，但只有在绑定属性变动的时候才重新计算，而methods则只要被调用了多少次，又会被重新调用多少次