[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,謝謝你看完這篇文章,如果文章有幫助到你的話,希望不吝於幫我拍手 🙌🙌
前幾個月由於在準備研究所的關係,沒有時間寫文章,最近研究所放榜總算可以好好繼續經營自己的文章了。