计算属性
在模板使用表达式会非常便利，但是仅适用于简单的运算。当放入太多的逻辑，使得模板过于难以维护。对于这样，就像一个数据需要根据另一个数据的变动而变动。也因此计算属性有了可以监视的能力。
<br/>
所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性也是用来存储数据，但具有以下几个特点：
数据可以进行逻辑处理操作
对计算属性中的数据进行监视
计算属性逻辑处理
计算属性跟data选项一样，也是用来存储数据的。
计算属性写在computed选项里。
可以看下面一个例子:var vm = new Vue({ el:'#app', data:{ message:'Hello' }, computed:{ //计算属性的getter方法 reversedMessage:function(){ return this.message.split('').reverse().join(''); } }})<div id="app"><p>message:{{message}}</p><p>Computed reversed message:{{ reversedMessage }}</p></div>
通过执行代码，message属性值为Hello，翻转了值为olleH。
reversedMessage属性的值为一个函数，这个函数是一个getter方法，如果该属性所依赖的属性(message)发生变更，此计算属性会重新触发。
修改代码如下:
<input type="text" v-model="message">{{message}}<p>Computed reversed message:{{ reversedMessage }}</p>该message属性进行了双向绑定，message值一更改，reversedMessage就会执行，并的到新的值，这就是它的监听的能力。
<br/>
计算属性的setter方法
当然计算属性默认只有getter方法，你还可以添加setter方法。
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}计算属性缓存与方法的比较
方法和计算属性都能为其进行单词翻转，结果都是一样的，但是不同的是，计算属性是基于他们的依赖进行缓存的，也就是说，只要message不改变，多次访问将返回原来的计算结果，而不必再执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
局部的侦听器写在watch选项中。
watch:{ name:function(newName,oldName){ console.log('新值:' +newName +',' + '旧值：' + oldName); } }name为监听的某个属性，第一个参数是的得到新值，第二个参数是旧值。
<br/>
选项deep
如果你监视对象，，你改变了此对象的属性，但是并不会改变对象的地址，因为它监视的是地址,
如果不发生改变就不会执行这个处理器，为了发现对象内部值变化，需要设置选项deep:true,注意监听数组是不用这么做。
user:{ handler:function(newVal,oldVal){ console.log('原值为' + oldVal.name + '新值为' + newVal.name); }, deep:true }加了之后会执行这个处理器函数，显示值。但是newVal和oldVal都是新的值，
因为对象时引用类型，两个变量都指向那个对象，所以，改变了值之后，自然oldVal.name也会改变成新值
选项：immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：
user:{ handler:function(newVal,oldVal){ console.log('原值为' + oldVal.name + '新值为' + newVal.name); }, immediate:true}// 立即以 `name` 的当前值触发回调