Vue.js计算属性

计算属性：

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>