模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，都应当使用计算属性。
<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>
原文：https://www.cnblogs.com/zhuxingqing/p/10502052.html