为什么使用计算属性
我们知道,在模板中可以直接通过插值语法显示一些data中的数据 。但在某一些情况时,我们可能需要丢数据进行一些转化后再显示,或者是将多个数据结合起来进行显示
例如:假如有两个变量firstName和lastName,需求是多次显示完整的名字,如果还是用插值法的话,我们就需要写多个 {{firstName}}{{lastName}},用起来就很麻烦,代码看上去也很低级 。所以我们就需要使用到实例中的计算属性computed
如何使用计算属性
注意:
(1)使用计算属性时不用像方法那样加小括号,它就相当于是一个属性,直接拿来用就可以
(2)计算属性取名最好不要是动词(虽然动词也不会有影响)
(3)下面我会谈及到计算属性和方法的区别
<body>
<div id="app" >
//小胡子方法
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
//使用methods,加上小括号
<h2>{{getfullName()}}</h2>
//使用计算属性,计算属性可以不加小括号,因为是一个属性
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'张',
lastName:'三'
},
methods:{
getfullName() {
return this.firstName + ' ' + this.lastName;
}
},
//计算属性取名最好不要加动词
computed:{
fullName:function() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
计算属性的setter和getter
注意:
(1)一般情况下没有set方法,只需要实现get方法(只读属性)
(2)只有get方法的可以简写
(3)set方法会有一个参数,这个参数就是传入的新的值
<body>
<div id="app" >
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'张',
lastName:'三'
},
computed:{
fullName: {
//一般情况下没有set方法,只需要实现get方法(只读属性)
set:function(newValue) {
const name = newValue.split(' ');
this.firstName = name[0];
this.lastName = name[1];
},
get:function() {
return this.firstName + ' ' + this.lastName;
}
}
//实质就是get方法
// fullName: function() {
// return this.firstName + ' ' + this.lastName;
// }
}
})
</script>
</body>
methods和computed区别
在上面我们看到methods和computed都可以用来实现需求,那么这两个究竟有什么不同呢?
在以下例子中分别执行methods和computed各两次,请看下图控制台打印结果。我们发现,methods执行了两次,而computed只执行了一次。
区别:
计算属性会进行缓存,如果多次使用,计算属性只会调用一次。只要其中的变量不改变,就不需要再一次执行,能够更好地提高性能
<body>
<div id="app" >
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'张',
lastName:'三'
},
methods:{
getfullName() {
console.log("我是方法");
return this.firstName + ' ' + this.lastName;
}
},
computed:{
fullName: function() {
console.log("我是计算属性");
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
小案例:用计算属性算总价
方法一
<body>
<div id="app" >
<h2>{{totalPrice}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
books:[
{ id: 1, name: "红楼梦", price: 115},
{ id: 2, name: "西游记", price: 86},
{ id: 3, name: "水浒传", price: 68},
{ id: 4, name: "三国演义", price: 133}
]
},
//计算属性
computed:{
totalPrice:function() {
let result=0;
for (let index = 0; index < this.books.length; index++)
result += this.books[index].price;
return result;
}
}
})
</script>
</body>
方法二
使用ES6中的语法,只改变for语句(使用in),其他与以上相同
computed:{
totalPrice:function() {
let result=0;
for(let i in this.books)
result += this.books[i].price;
return result;
}
}
方法三
使用ES6中的语法,只改变for语句(使用of),其他与以上相同
computed:{
totalPrice:function() {
let result=0;
for(let book of this.books)
//无需加this
result += book.price;
return result;
}
}