Vue计算方法methods和计算属性computed对比

当我们想要显示data中没有声明的变量时,可使用methods里的方法或者computed里的属性去人为计算获得.
比如,我们想要获得用户全名,但是data里并没有直接定义全名,只定义了firstName, lastName. 那么我们可以自己在methods内部定义方法去计算出该用户全名,或者在computed里计算出用户全名属性值.
以下代码,是通过methods内部定义的方法获得了用户全名:

<div id="app">
<p>{{getFullName()}}</p>
<p>{{getFullName()}}</p>
<p>{{getFullName()}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
firstName:"Gates",
lastName:"Bill"
},
methods:{
getFullName:function(){
console.log("firstName");
return this.firstName+' '+this.lastName;
}

}
});
</script>

以下代码是通过computed属性去获取全名:

<div id="app">
<p>{{fullName}}</p>
<p>{{fullName}}</p>
<p>{{fullName}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
firstName:"Gates",
lastName:"Bill"
},
computed:{
fullName:function(){
console.log(this.firstName);
return this.firstName+' '+this.lastName;
}
}
});
</script>

**可以看到,以上两种方法都可以将计算出的用户全名完整显示出来. 但是methods里的getFullName函数被调用三次.computed里的属性只被调用一次.
由此得出:计算方法不会进行缓存.而计算属性会进行缓存,如果多次使用时,计算属性只会被调用一次.
当数据不发生改变时,computed里的fullName会被Vue内部缓存起来.只有当数据发生改变,才会再次调用fullName
**