计算属性:
Vue中的computed属性用来指定计算属性。计算属性本质上将是一个函数,主要用来处理一些复杂逻辑。例:
<div id="app">
<p>原始字符串:{{message}}</p>
<p>反转后:{{reversedMessage}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'vue学习'
},
computed:{
reversedMessage=function(){
return this.message.split('').reverse().join('');
}
}
});
</script>
这里,使用了reversedMessage计算属性。computed中的reversedMessage指定的函数,作为其getter。
computed和methods
对于computed中定义的计算属性,可以通过在methods中定义方法来实现相同的功能。区别在于,computed中的计算属性,基于其依赖缓存。当依赖缓存发生改变时,会重新取值。如上面的示例中,只有当message的缓存发生改变时,reversedMessage才会随之更新。而methods中定义的函数,在重新渲染时,函数总会重新调用执行。
可以简单的理解为,computed中的计算属性的性能更好。如果不用缓存,两者相同。
getter和setter
computer的计算属性,默认只有getter。我们可以在需要时增加setter。例:
<div id="app">
<p>{{site}}</p>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
name:'google',
url:'www.google.com'
},
computed:{
site:{
get:function(){
return this.name+" "+this.url;
},
set:function(newValue){
var newSite = newValue.split(" ");
this.name = newSite[0];
this.url = newSite[newSIte.length-1]
}
}
}
});
//调用setter,vm.name和vm.url会被更新。<p>中的计算属性因为依赖于name和url的缓存,所以也会更新。
vm.site = 'runnob www.runnob.com';
document.write(vm.name+" "+vm.url);
</script>