前天剛好遇到了Methods( https://ithelp.ithome.com.tw/articles/10206346 )簡單做了一下說明，當然這樣一定不夠的，經過了這段時間的學習，大家一定能深刻體會到邏輯運算被大量的使用(當然啦！工程師就是要寫程式嘛)，我們不可能把它們全亂放在頁面裡，這樣也太難維護了！放在Computed或Methods都沒出錯啊，但其實是有差的喔！它們是什麼？該怎麼選用？今天就特別來詳細看看！

Computed

當我們寫入了大量「函數」，那當然要統一管理了！要放哪？「計算屬性Computed」就是專門讓你放運算式的好地方！Computed放的位置如下：

<script>
  export default {
    computed: {

    }
  }
</script>

computed會把之前的計算結果暫存起來，當使用到的data資料發生改變時，computed就會開始重新計算。

Methods

Methods用法跟Computed完全一樣，但兩者可是有差別的喔！Computed是跟據有使用到的data資料發生改變，才會重新計算，但Methods是只要有資料變動(觸發重新渲染時)，就算它沒有用到這份資料都會重新運算，而這樣一來相對很吃效能，由其是其中一個函數需要大量的計算時！以上就是Computed與Methods最大的差異。

特別注意：

熟js的朋友一定很喜歡用箭頭函數，它是很方便的簡寫，但是在Methods裡不能用喔，因為箭頭函數綁定了父層的上下文，所以this不會像你想的一樣指向Vue，而是會變undefined。

依據以上分析結果做個簡單總結：

• 沒有特別需要每次都運算函數，那就使用computed效能會比較好。
• 需要每次更新全部函數運算結果，那就選用methods。

Getter

最後還有一個Getter，今天上班時剛好學到！它跟Computed一樣都是用來放運算函數的，但是很大的不同是，它是專門在store中整理、過濾state的資料，以上新手一定聽不懂，因為我兩星期前也一樣！現在就來解說一下，一個網站有很多資料都存在後台(會員、統計資料、資訊等…)，而當我們要跟後台要資料(打api)時會有一個流程，很簡單的說就是從前台頁面「觸發要資料的需求」>「到store執行我們設定的actions(打api)」>「後台回資料回來」>「commit」>「mutations(設定資料寫入位置)」>「stat(存放打回來資料的地方)」>最後到前台頁面，目前先簡單知道有這個循環就好。
知道以上打api過程後，那當我們要整理打回來的資料，比如說我今天拿回9月份的統計資料，要用運算函數過濾出每個星期日的統計資料並呈現出來，這時就要在store中使用Getter來放「運算函數」整理、過濾state的資料的。

未來學Api就會實際用到它了，先聽聽就好！