計算屬性和觀察者
在學習計算屬性之前，先簡單說一下模板屬性：{{}}繫結資料
{{}}裡邊只能寫一條表示式，可以寫JS表示式子， 缺點，程式碼過重，難以維護，它不能執行復雜的JS邏輯

官方的定義：
模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的，在模板中放入太多的邏輯會讓模板過重且難以維護

為了解決這個問題，所以有了一個computed計算屬性
computed 可以直接在模板語法裡使用,力與維護，和寫一些複雜的JS邏輯，
解決了{{}}裡邊只能寫一條表示式的問題；
所以，對於任何複雜邏輯，你都應當使用計算屬性。
這裡寫一個vue官網的 反轉字串例子：

html程式碼：

<div id="app">
  <p>最初的字串: "{{ msg }}"</p>
  <p>反轉後的字串: "{{ reversedMessage }}"</p>
</div>

js程式碼：

var vm = new Vue({
  el: '#app',
  data: {
       msg : 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return
 
 this.message.split('').reverse().join('')
    }
  }
})

結果：

最初的字串: "Hello"
反轉後的字串: "olleH"

這裡我們聲明瞭一個計算屬性 “reversedMessage”。我們提供的函式將用作屬性 vm.reversedMessage 的 getter 函式

所以當我們重新賦值給”msg”時，它也會發生反轉：

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

當然，下面緊接著就說到，methods裡面不是可以存放方法嗎？那不是也可以這樣寫？：

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed 相比 function ：
所達到的效果是一樣的，但是官方給出了這樣的解釋：

我們可以將同一函式定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式。

有快取的原因（官網）：

假設我們有一個性能開銷比較大的的計算屬性 A，它需要遍歷一個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有快取，我們將不可避免的多次執行 A 的 getter！

computed除非資料發生改變，才會重新賦值，。所以你只要用了computed，只要你的資料不改變，儘管經過多次呼叫，他還是會返回你之前的值，這就不用像函式那樣每一次都要執行了。也就是說，computed有快取，如果不想要快取的話，就只能用methods 裡的方法。

官網還用computed 和 watch 進行了比較；
比較結果就是watch程式碼繁瑣；
而computed程式碼簡潔，避免了重複的程式碼；
下面是官網的例子：

<div id="demo">{{ fullName }}</div>

//watch方法：
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'//輸出結果就是這個
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
/*******************************************************/
//computed方法：
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {//只需要一句就可改變fullName；
      return this.firstName + ' ' + this.lastName
    }
  }
})

由上述程式碼可以知道，雖然輸出的fullName都是'Foo Bar'，但是效能上，還是computed略勝一籌。

文章持續更新中。。。。。
如果上面內容有那些不對的地方，還請給評論指出。。。
讓我們一起進步。。。