---
tags: Vue.js
---

# Vue.js - `computed`

## 特性

### `computed`
- 主要用來處理複雜邏輯運算
- 跟著來源資料變化
- 有暫存機制 (cache)
- 必須是 function 無法帶參數，且會 return 一個值

## 差異

### `methods` & `computed` & `watch`
- `computed`：
- 監控資料更動後，重新運算結果呈現於畫面上
- 一般來說不會修改資料，只會回傳用於畫面呈現的資料

- `methods`：
- 互動的函式，需要觸發才會運作
- 會用來修改資料內容，建議用作主動觸發時

- `watch`
- 監控特定資料變化，當值變動的時，做某些事

## `getter` & `setter`

### `getter` (讀取)
- 要搭配 return 使用
- 內部觀察的資料有改變時會被觸發

### `setter` (設值)
- 被觀察的物件本身有改變時會被觸發

***

## 範例

### 金額轉換

<p>1日元=0.26台幣 , 1美金=28.45台幣</p>
<v-text-field v-model="twd" label="台幣:"></v-text-field>
<v-text-field v-model="jpy" label="日元:"></v-text-field>
<v-text-field v-model="usd" label="美金:"></v-text-field>

export default {
    data: () => ({
        twd: 100
    }),
    computed: {
        jpy: {
            get() {
                return Number.parseFloat(Number(this.twd) / 0.26).toFixed(3)
            },
            set(val) {
                this.twd = Number.parseFloat(Number(val) * 0.26).toFixed(3)
            }
        },
        usd: {
            get() {
                return Number.parseFloat(Number(this.twd) / 28.45).toFixed(3)
            },
            set(val) {
                this.twd = Number.parseFloat(Number(val) * 28.45).toFixed(3)
            }
        }
    }
}


### 參考文件
- [getter and setter 說明](https://pjchender.blogspot.com/2017/05/vue-computed-getter-setter.html)