[Vue] 還是不懂 Computed ？

前言

還記得一開始在學習 Vue 的時候，介紹到 Computed 都會說有點像是資料的加工版本，但實際上解釋給別人聽時還是會疑惑下，另外 Computed 跟 Watch 又差別在哪，是時候來了解下了。

目錄

1. Computed 誕生
2. Computed 與 Method
3. Computed 與 Watch
4. getter 與 setter

Computed 誕生

Computed 翻譯過來為計算屬性，對我來說像一本食譜，對…就是食譜！

根據食材搭配不同的配料可以呈現出各種料理。

來源

先來談談為什麼會有 Computed 出現，官方表示設計的初衷是為了防止在樣板中放入過多的邏輯。

比如來說，今天我想要把我的名字倒過來的話…

如果每個地方都這樣寫的話，大概能想像到專案會看到很痛苦。因此有了 Computed 的誕生，我們可以改寫成…

這樣不僅可以讓模板乾淨，也可以在多個地方調用。

記得 Computed 一定要 return 一個值出來，並且在樣板使用才會開始運作。

Computed 與 Method

仔細看可以發現上面的寫法，寫在 Method 裡好像也不為過啊（？

這時候要來介紹 Computed 的一個特性「 暫存 」，每次調用時他會把結果暫存起來，假如今天我寫了一個複雜的 Computed 需要費時一秒，在沒有暫存的狀態下，我是不是調用 100 次就會花個… 100 秒（？

另外要提到，讓 Computed 更新的條件，是原始資料必須變更，也就是說資料沒變動的話就不會觸發 Computed 更新，不管取幾次他都會拿暫存的資料給你。

所以像下面這樣寫並不會隨時更新時間哦。

如果不想要暫存的話，可以使用 Method。

Computed 與 Watch

Computed 是根據依賴的值變更做計算處理，Watch 則是監聽「一個值」變更而做接下來的程序。你可能會困惑，Watch 是不是能代替 Computed…

先來看看官方舉的例子：

watch

監聽 firstName 與 lastName，值變化時去改變 fullName。

computed

當 firstName 與 lastName 變更時，自動計算出 fullName。

在這個例子中 Computed 確實簡單俐落，但你看出什麼端倪了嗎!?

比較結果

1. Computed 可以經由依賴的值變化去計算出一個結果 ( 多對一 ) ，而 Watch 則是可以監聽一個值得變化去做一系列的程序 ( 一對多 ) 。
2. Watch 可以在 callback 裡取出舊值新值做處理。
3. 請別忘了 Computed 擁有暫存的特性。

getter 與 setter

在預設下，Computed 是只有 getter 的！也就是一般情況下他是只能讀取不能更改。但在一些例子下你可以加上 setter 做更改處理。

看以下例子，我們透過 v-model 綁定 Computed，當更改 input 值的時候，會觸發 setter 去更改 firstName 與 lastName，剛好又因為這兩個值變更而帶動 getter 的更新。

換句話說，如果 setter 並未更改 getter 所依賴的值的時候，就不會觸發 getter 更新。

結論

看完這篇文章後，我們可以了解到…

• Computed 如何使用
• Computed 與 Method 的差異
• Computed 與 Watch 的差異
• 如何調用 Computed 中的 setter

大概就是以上幾點，如果哪邊寫錯的話麻煩告訴我修正，也歡迎提出問題來一起討論 :D

參考資料

计算属性和侦听器 - Vue.js

vue.js计算属性computed【getter和setter的一些思考】

vue中的computed和watch到底有什么不同？