一、計算屬性？什麼東東？？

不廢話，先看程式碼：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

上面{{}} 內是可以寫表示式的，但是一般會寫一些簡單的表示式。太複雜的話，可讀性比較差，難以維護。
所以，vue提供了計算屬性這個東西，即我們所說的computed。
特點：計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算（這點詳細作用可以對比文中第三點）

二、怎麼用膩？

首先要知道計算屬性裡用來完成各種複雜邏輯（運算、函式呼叫等），只要最終返回一個結果即可。computed裡有getter和setter，getter用來讀取，當手動修改屬性值時觸發setter。

<div id="example">
   <p>{{ reversedMessage }}</p>
   <p>{{splitMessage}}</p>
</div>

var vm = new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    // 讀取和設定
    splitMessage: {
      //getter用於讀取
      get: function () {
        return this.message.split('').join('-')
      },
      //setter寫入時觸發
      //（什麼時候會觸發？？當我們在程式碼中改變this.message值得時候，就會觸發setter和getter，比如：執行this.message = 'world'時）
      set: function (newValue) {
        this.message = newValue
      }
    }，
    // 僅讀取（一般情況下，我們只會用預設的getter方法，所以可以簡寫如下）
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
 

在此，只要會用預設getter，問題就不大。

三、對比methods

在表示式中呼叫methods中的方法，同樣可以達到同樣的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在元件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

那我們直接用methods就好了唄，vue為何還要建立computed呢？問得好！
因為methods這種方法，值是實時更新的，當頁面元件重新整理或者執行this.message = 'world'

四、對比watch

當this.message發生變化時候，觸發setter、getter。好似監聽、於是我們想到了watch。那他們的區別在哪呢？
例子：

<div id="myDiv">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>

computed：

//這裡不用再data中宣告fullName
new Vue({
    el:"#myDiv",
    data:{
        firstName:"Foo",
        lastName:"Bar",
    },
    computed:{
        fullName:function(){
            return  this.firstName  + " " +this.lastName;
        }
    }
})

watch：

new Vue({
  el: '#myDiv',
  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是計算屬性，是依賴其它的屬性計算所得出最後的值。watch是去監聽一個值的變化，然後執行相對應的函式。
• computed的值在getter執行後是會快取的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時才會重新呼叫對應的getter來計算。watch在每次監聽的值變化時，都會執行回撥。其實從這一點來看，都是在依賴的值變化之後，去執行回撥。很多功能本來就很多屬性都可以用，只不過有更適合的。如果一個值依賴多個屬性（多對一），用computed肯定是更加方便的。如果一個值變化後會引起一系列操作，或者一個值變化會引起一系列值的變化（一對多），用watch更加方便一些。
• watch的回撥裡面會傳入監聽屬性的新舊值，通過這兩個值可以做一些特定的操作。computed通常就是簡單的計算。

說了這麼多，其實我們可以簡單理解為：

1、當我們想的值是實時更新的，我們用methods
2、當我們想要計算後的屬性值，依賴於其他資料變化才更新，我們用computed
2、當依賴資料發生變化後，我們還要做其它的一些事情，我們用watch

#end
原文連結