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` 的當前值觸發回調