为什么要用计算属性
- 我们知道,在模板中,我们可以直接通过插值语法显示一些data中的数据,但是在某些情况下,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示。
- 比如我们有firstName和lastName两个变量,而如果我们需要显示完整的名称,可能就需要写上{{firstName}}{{lastName}},这种情况,如果我们使用计算属性,就可以只使用一个变量来显示一个完整的名称
计算属性的基本操作
<div id="app">
<!-- <h2>{{firstName}}{{lastName}}</h2> -->
<h2>{{fullName}}</h2>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
firstName: 'Kosfe',
lastName: 'Ccnkf'
},
computed: {
fullName() {
return this.firstName + this.lastName
}
}
})
</script>
计算属性的进阶操作
// 使用计算属性计算出书的总价格
<div id="app">
<h3>总价格:{{totalPrice}}</h3>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
books:[
{name:'三国演义', price:29},
{name:'红楼梦', price:22},
{name:'西游记', price:27},
]
},
computed: {
totalPrice: function(){
let result = 0;
for (let book of this.books) {
result += book.price;
}
return result;
}
}
})
</script>
计算属性中的get和set方法
- 每一个计算属性都包含了一个get和set方法,只是大多数情况下被省略了,当我们通过计算属性返回值时,实际上就是调用了计算属性中的get方法,当我们修改计算属性时,实际上就是调用了计算属性中的set方法
- 然而,set方法基本上不用,get方法等效于直接返回值,因此,get和set基本上都省略了
<script type="text/javascript">
const app = new Vue({
computed: {
fullName: {
set: function(newValue) {
console.log('-----', newValue);
const names = newValue.split('b');
this.firstName = names[0];
this.lastName = names[1];
},
get: function() {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
计算属性与方法的异同点
- 计算属性与方法的功能有点像,不同的是,计算属性中不能传入参数,并且它是以一个属性的形式表现
- 其实,计算属性能够实现的功能,方法都能实现,而让计算属性不能被方法替代的优点是,它更节约性能,并且它会随着被调用次数的增大而无线扩大这个优点。当计算属性在被调用时,它会在内部做一次缓存,如果多次被调用,如果计算属性没变,它会直接返回缓存的结果,而方法在每次被调用时都会重新计算