先来看一个应用场景，一个人名字由firstName以及LastName构成，我需要知道fullName，我们采用三种方式实现并进行对比。
第一种：方法
<body>
<!--挂载点 模板 示例区别-->
<div id="root">
{{fullName() + " " + age}}
</div>
<script>
var vm=new Vue({
el:"#root",//元素指向,绑定
data:{
firstName:"Dell",
lastName:"Lee",
age:15,
},
methods:{
fullName:function () {
console.log("计算了一次");
return this.firstName+" "+this.lastName;
}
},
});
</script>
</body>
页面显示并没有什么问题：
现在我们尝试去更改age:
vm.age=18;
我们发现控制台输出了 “计算了一次” ，尽管这个时候fullName并没有改变，但由于fullName定义在了methods里面，导致了不必要的开销。
第二种：watch
<body>
<!--挂载点 模板 示例区别-->
<div id="root">
{{fullName + " " + age}}
</div>
<script>
var vm=new Vue({
el:"#root",//元素指向,绑定
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:15,
},
watch:{
firstName: function () {
console.log("计算了一次");
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function () {
console.log("计算了一次");
this.fullName = this.firstName + " " + this.lastName;
}
}
});
</script>
</body>
你会发现页面显示也符合预期，我们再去更改age.
vm.age=19;
并没有发现输出了“我计算了一次”，说明watch自带缓存，只有相关遍历改变时才会被调用。
第三种：计算属性
<body>
<!--挂载点 模板 示例区别-->
<div id="root">
{{fullName + " " + age}}
</div>
<script>
var vm=new Vue({
el:"#root",//元素指向,绑定
data:{
firstName:"Dell",
lastName:"Lee",
age:15,
},
computed:{
fullName:function () {
console.log("我计算了一次");
return this.firstName + " " + this.lastName;
}
}
});
</script>
</body>
页面显示同样没什么问题。
我们现在去更改vm.age=19;
并没有发现有多余输出，说明计算属性同样具有缓存机制。
对比
我们对比以上三种做法，使用方法显示数据，会在每次页面重绘时再执行一次，加大了开销，而第二种与第三种进行对比，明显第三种显得更加简洁，所以在三种方式都可以解决问题时，我们推荐使用计算属性。
