Vue语法学习第三课——计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，都应当使用计算属性。

<div id="example"><p>original message : "{{message}}"</p><p>computed reversed message : "{{reverseMessage}}"</p></div><script>var vm = new Vue({el:"#example",data:{message : "zxq"},computed : {reverseMessage : function(){return this.message.split('').reverse().join('');}}});</script>

 同样的效果也可以通过在表达式中调用methods实现。

注：计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，计算属性才会重新求值。

如上示例，只有当message改变时，多次访问 reverseMessage 计算属性才会再次执行函数，否则会返回之前的结果。

而对比methods，总是会再次执行函数。

 

computed 和 watch

<div id="app0">firstname : <input type="text" v-model="firstName"/><br/>lastname  : <input type="text" v-model="lastName"/><p>my name is : {{fullName}}</p>
</div>

 

① watch

　　　　var vm = new Vue({el: '#app0',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (val) {this.fullName = val + ' ' + this.lastName},lastName: function (val) {this.fullName = this.firstName + ' ' + val}}})

 

 

② computed

　　　　 var vm = new Vue({el: '#app0',data: {firstName: 'Foo',lastName: 'Bar'},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}})

 

相比之下，计算属性更为简洁

 

计算属性默认只有get方法，但在必要时也可以提供一个set方法

　　<div id="example">firstname     :     <input type="text" v-model="firstName"/><br/>lastname      :     <input type="text" v-model="lastName"/><br/>my name is 　 :    　<input v-model="fullName" /></div><script>var vm = new Vue({el:"#example",data: {firstName: 'zhu',lastName: 'xingqing'},computed : {fullName : {get : function(){return this.firstName + ' ' + this.lastName},set : function(newVal){newfull = newVal.split(' ');this.firstName = newfull[0];this.lastName = newfull[1];}}}});</script>