[Vue學習筆記]（七）計算屬性、監聽器、過濾器 — computed, watch,filter
上篇文章中我們使用基礎的Vue指令寫了一個簡易購物車，基本上方法都是寫在屬性的methods中，本篇則要介紹Vue中一個與methods很相似的屬性computed，及watch。
ㄧ、為何需要計算屬性？
我們知道如果要對資料輸出做處理，可以直接在內插式中進行處理，比方說字串的反轉，我們可以寫成：
{{msg.split('').reverse().join('')}}但寫成這樣並不方便閱讀，也會減少程式碼的閱讀性，因此我們可以透過computed計算屬性來表示，方法如下：
在Vue實例中定義一個computed屬性，並新增方法在其中。
使用時則直接將方法明置入於內插式中，並不需要加上()來調用。
二、computed與method的區別
最大的差別就是有無緩存機制，從下面例子可以明顯看出來：
成果如下：
當我們打印兩次reversMessage時，「翻轉句子」卻只輸出一次，是因為當第一次調用reversMessage函式時，Vue就已經將結果保存到緩存之中，第二次呼叫則直接將結果返回。
若你改成methods，則會呼叫兩次，也就是同樣的事情會做兩次，相比之下，computed會讓你的性能更好，因此我們可以將比較耗時或複雜的函式放入computed中。
PS. 當msg改變時，computed會再重新計算一次。
三、監聽器 watch
監聽器的定義是，當「數據發生變化時，執行非同步或開銷較大的動作時，會執行的函數」。
使用方法為：
watch:{ 屬性名稱: function(屬性值){ // 當屬性值發生變動時的動作 },}
舉例來說，我們可用v-model讓數據發生變動測試watch屬性：
這邊我們可以看到，watch屬性監控了兩個值，firstName 與 lastName，當其中一個發生變化時，fullName就會重新重組。
四、過濾器
Vue的過濾器主要用來格式化數據，或是轉換日期顯示方法等處理數據的應用。
過濾器規則：
Vue.filter('過濾器名稱',function(val){
// 過濾器處理過程
})過濾器的使用有兩種方式：
- 插值表達式
{{ msg| upper(過濾器名稱) }}2. v-bind
<div v-bind:id="id | formatId"></div>接下來實際做一個小應用，將輸入的字串轉換為首字母大寫，要注意的是，Vue.filter()要先行定義。
本篇github連結
我是Andy，謝謝你看完這篇文章，如果文章有幫助到你的話，希望不吝於幫我拍手 🙌🙌前幾個月由於在準備研究所的關係，沒有時間寫文章，最近研究所放榜總算可以好好繼續經營自己的文章了。
