作用:在复杂的逻辑时应该使用计算属性。
关键字:computed。
和其他方法一样,定义在Vue实例中。
如:
<div id="app">
{{reversedText}}
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
text:'123,456'
},
computed:{
reversedText:function(){
return this.text.split(',').reverse().join(',');
}
}
});
</script>
计算属性的用法:
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPhone 7',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'banana',
price:2,
count:10
}
]
},
computed:{
prices:function(){
var prices = 0;
for (var i = 0; i < this.package1.length; i++) {
prices += this.package1[i].price*this.package1[i].count;
}
for (var i = 0; i < this.package2.length; i++) {
prices += this.package2[i].price*this.package2[i].count;
}
return prices;
}
}
})
</script>
一、计算属性可以依赖其他计算属性
二、计算属性还可以依赖其它实例的数据
如:
<div id="app1"></div>
<div id="app2">
{{reversedText}}
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
var app1 = new Vue({
el:'#app1',
data:{
text:'123,456'
}
});
var app2 = new Vue({
el:'#app2',
computed:{
reversedText:function(){
return app1.text.split(',').reverse().join(',');
}
}
})
</script>
计算属性缓存:
计算属性和methods的作用相同,但是计算属性基于依赖缓存的,也就是说依赖数据没有改变,就会缓存下来。而methods则是每次执行都会调用。
官方文档:
我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。 如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。