Vue 初心者筆記 #5 Computed 計算屬性
本文介紹 Vue.js 的 computed 計算屬性,並實作練習使用 computed 來呈現日期與時間格式。
如何使用 Computed 計算屬性
- 新增
computed
物件,在這裡面宣告的任何屬性都是 Function - 在
computed
裡面新增方法 - 方法裡面要
return
一個值,跟在data
裡面使用的return
有點類似,但是computed
是把結果儲存在變數之中,並運用在畫面上 - 在 HTML 中透過 Mustache 將資料呈現到畫面上
範例:
1 | <div id="app"> |
練習範例:反轉字串
知道如何使用 computed
之後,我們馬上就來練習一個題目,我們試著透過 computed
來完成反轉字串。
- 預先定義空字串
text
與newText
- 把
return
的內容換成反轉字串的表達式:.split('').reverse().join('')
- 因為
return
並不知道我們要的text
是哪個text
,所以我們應該要寫成this.text
,來指向data
下面的text
1 | <div id="app"> |
重點一:觸發條件
除了以上的使用介紹外,這邊也要特別提醒,因為 computed
的觸發條件是當 data
裡面的值受到更動時,computed
的結果才會跟著做更動。
因此,如果值不是在 data
內,也就是說它不是在 this
之下的話,更動是無法被觸發的。
重點二:函式不能傳參數
- 特別注意在
computed
裡面的函式是”不能傳遞參數”的。
錯誤範例:
這個例子中的 reverseText: function(count){..}
是錯誤的,因為 computed
不能傳參數,這樣寫會發生錯誤。
1 | var app = new Vue({ |
實作練習:使用 Computed 呈現時間格式
接著我們來實戰一波,試著利用 computed
加上 JavaScript 提供的 Date
物件來取得、操作日期與時間。
STEP 1:在 computed 中新增 Date 物件
- 新增
computed
物件與裡面的函式getDate
- 在函式中宣告
Date
物件:let today = new Date()
- 在
data
中新增newDate
空字串,用來儲存結果並呈現到畫面上 - 在 HTML 使用 Mustache 語法呈現
getDate
字串(直接寫方法名稱)
關於步驟 2,因為 Date()
不是瀏覽器必然存在的物件,所以用 new
來產生它。new Date()
用於處理日期和時間,如果沒有指定參數,物件預設的值為產生物件的日期與本地時間,而本地時間是指執行 JavaScript new Date()
的用戶電腦的時間。
範例程式碼:
1 | <div id="app"> |
這樣就能回傳 "2019-10-14T07:39:15.903Z"
這種格式的字串了!
但是,這還不是我們要的時間格式,所以接下來我們要整理 Date
物件產生的格式。
STEP 2:整理日期與時間的格式
這邊我們利用 Date
物件的 get
方法,把需要的東西拿出來用,最後再組成字串呈現於畫面上。
日期 get 方法
getFullYear()
:取得年份,採用四位數西歷年1
let year = today.getFullYear();
getMonth()
:取得月份,從 0 開始算起1
let month = today.getMonth();
getDate()
:取得日(天),從 1 ~ 311
let day = today.getDay();
時間 get 方法
getHours()
:取得時數 0 ~ 23,時區為台北標準時間 (GMT+8)1
let hours = today.getHours();
getMinutes()
:取得分鐘 0 ~ 591
let minutes = today.getMinutes();
getSeconds()
:取得秒數 0 ~ 591
let seconds = today.getSeconds();
組合字串
最後把這些日期與時間組合成一個字串,並指向我們一開始在 data
裡面新增的空字串 newDate
。
1 | let date = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`; |
如此一來,回傳的就是我們常看到的時間字串格式哩 : )
範例程式碼:
1 | <div id="app"> |
比較 Computed 與 Methods 的差異
雖然在學習 computed
之前,我們使用之前學的 methods
也可以做出這些功能。
但是兩者的概念不太一樣,因為 computed
是監控到資料更動後,就重新運算結果並呈現於畫面上。
此外,一般來說 computed
不會修改資料,只會回傳資料到畫面呈現而已。
這與 methods
就大不相同了,因為 methods
主要就是在互動的函式,需要觸發才會運作,因此 methods
通常都會用來修改資料內容。
然而,如果資料量大,computed
自然會比較慢!
因為只要資料變動,computed
就一定會觸發,無形之中執行次數就會增加。
因此在處理大量資料時,通常就會建議透過 methods
來執行,減少不必要的運算哩 : )
以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。