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` 的当前值触发回调