先来看一个应用场景,一个人名字由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;
并没有发现有多余输出,说明计算属性同样具有缓存机制。
对比
我们对比以上三种做法,使用方法显示数据,会在每次页面重绘时再执行一次,加大了开销,而第二种与第三种进行对比,明显第三种显得更加简洁,所以在三种方式都可以解决问题时,我们推荐使用计算属性。