一,作用
简化模板,将复杂的计算逻辑写在计算属性中
<div id="app">
<h1>{{conn}}</h1>
</div>
<script>
new Vue({
el:'#app',
data:{
msg1:'hello',
msg2:'world!'
},
computed:{
function:conn(){
return this.msg1+' '+this.msg2
}
}
})
</script>
结果展示
二,对比methods
methods也能实现相同的效果,但计算属性的性能更好,以上面的conn为例,当conn被多次执行时,使用methods会多次调用conn,但计算属性对conn做了一个缓存,他会观察conn里值是否有变化,如果没有变化就直接返回缓存里的值,如果有变化才会重新调用一次conn
三,特点:
计算属性使用的时候是按照属性的形式调用,而不是以函数的形式
计算属性完整的写法应该是这样,我们需要一个属性conn来返回结果,采用了对象的形式
conn:{
set:function (){
//计算属性一般只实现get方法,所以set方法一般是空的
},
get:function (){
return this.msg1+' '+this.msg2
}
}
因为一般只实现get方法,所以为了更加简化,最终写成这种形式
conn:function (){
return this.msg1+' '+this.msg2
}
所以本质上conn还是属性,所以调用的时候并不是以函数的形式
学习时的记录,共同交流