Vue2.0笔记——计算属性和侦听器

计算属性

在模板使用表达式会非常便利，但是仅适用于简单的运算。当放入太多的逻辑，使得模板过于难以维护。对于这样，就像一个数据需要根据另一个数据的变动而变动。也因此计算属性有了可以监视的能力。
<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` 的当前值触发回调