Vue基礎：計算屬性 與 偵聽器

（一）計算屬性computed

對於任何複雜邏輯，你都應當使用計算屬性。

1. 基本使用

計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們纔會重新求值。這就意味着只要依賴數據沒有發生改變，computed將從緩存中獲取之前的計算結果，而不必再次執行函數。

例子：

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

上面聲明瞭一個計算屬性 reversedMessage。其中我們提供的函數將用作屬性 vm.reversedMessage 的 getter 函數：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

2. 計算屬性的 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]
    }
  }
}
// ...

（二）偵聽器watch

watch 對象就是偵聽器，只有當偵聽的值改變了它纔會執行。

1. 基本使用

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
        f: {
            g: 5
        }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    b: 'someMethod',  //在方法裏寫對應的函數
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true // 更改對象的時候需要用深度監聽
    },
    // 該回調將會在偵聽開始之後被立即調用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true  //該屬性能使函數默認的執行一次
    },
    e: [
        function handle1(val, oldVal){ /* ... */ },
        function handle2(val, oldVal){ /* ... */ },
    ],
    // 監聽vm.e.f的值: {g: 5}
    'e,f': function(val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

注意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。

2. 與計算屬性computed使用場景的對比

• watch選項允許我們執行異步操作（訪問一個API）或高消耗性能的操作，限制我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態
• computed 是計算一個新的屬性，並將該屬性掛載到 vm（Vue 實例）上，而 watch 是監聽已經存在且已掛載到 vm 上的數據，所以用 watch 同樣可以監聽 computed 計算屬性的變化（其它還有 data、props）
• computed 本質是一個惰性求值的觀察者，具有緩存性，只有當依賴變化後，第一次訪問 computed 屬性，纔會計算新的值，而 watch 則是當數據發生變化便會調用執行函數
• computed 適用一個數據被多個數據影響，而 watch 適用一個數據影響多個數據

詳細見：

Vue官方文檔 - vm.$watch