# 🏅Day10 - Vue.js 的黑魔法：Computed

## Computed

computed properties 是基於響應式數據計算出來的屬性，

它們會根據其原本的資料進行自動更新，只有在資料發生變化時才會重新計算。

根據官方文件，`computed` 設計的初衷是避免開發者在樣板區塊放入太多的邏輯，

我們在管理資料時會希望來源一致。

例如下面範例中的 `tripleCount` 就是由 `count` 延伸出來的，

這樣日後就不必管理兩個變數。

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：computed 範例 (1)" src="https://codepen.io/yen-kg/embed/jOoRRLv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/jOoRRLv">
Composition API：computed 範例 (1)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## getter & setter

可以將 `computed` 拆分成以下兩個行為來看：

1. `getter` 是 `computed` 屬性的一部分，負責返回計算結果，當原本的資料發生變化時，會自動重新計算並返回新的結果。

2. `setter` 則是另一個函數，它允許我們設置 `computed` 屬性的值，並自動更新原本的資料。

可以看到下面的範例，建立了兩個變數 `firstName`、`lastName` 並且計算出 `fullName`，

當 `fullName` 重新被設置時，同時也會更新 `firstName`、`lastName`。

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：computed 範例 (3)" src="https://codepen.io/yen-kg/embed/Jjqqzdp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/Jjqqzdp">
Composition API：computed 範例 (3)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Computed 注意事項

因為使用 `computed` 定義的計算屬性是基於響應式資料的，返回的是一個只能夠讀取的 `ref` 物件，

沒有為 `computed` 屬性加上 `set`，不允許手動修改對應的 `computed` 屬性，

否則會如範例中一樣出現警告。

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：computed 範例 (2)" src="https://codepen.io/yen-kg/embed/rNgbbYE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/rNgbbYE">
Composition API：computed 範例 (2)</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

題目
---
操作 [這個模板](https://codepen.io/yen-kg/pen/oNRROLv)，執行以下要求（只能操作 script 的部分）：

* 小明若要把全部水果都買下來，需要花多少錢 ?

請利用 `computed` 的方式，將全部水果總價錢計算出來 ( 價錢 * 數量 )，並且正確呈現在畫面上。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
const totalPrice = computed(() => {
let sum = 0;
for (let i = 0; i < fruitData.value.length; i++) {
sum += fruitData.value[i].price * fruitData.value[i].count;
}
return sum;
});
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/RNWjqLw) |
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/azvVQYP) |
| dean | [CodePen](https://codepen.io/ch933114/pen/azvVQer) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/vENWvKy) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/wBKPRWp) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjyxOG)|
| Gui | [CodePen](https://codepen.io/guitimliu/pen/YPyEBMd) |
| dPi | [CodePen](https://codepen.io/pen/jEbadRr) |
| DaRon | [CodePen](https://codepen.io/daron0811/pen/EaVbJYJ) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/WbQXmXp) |
| haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/RNWLvYm) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/pvjpvLG) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/yyYpVQJ) |
| wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/JoYMJPL)
| Lin | [CodePen](https://codepen.io/Lin4611/pen/wBKpdVv) |
| Sam | [CodePen](https://codepen.io/Sammy-the-styleful/pen/YPyYOaG) |
| 地呱 | [Codepen](https://codepen.io/LHung/pen/vENpdqQ) |
| Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/XJmVPwW) |
| 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/azvERqJ) |
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/jEbYQJL) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/XJmVoVw) |
| David0799 | [CodePen](https://codepen.io/David0799/pen/gbamzXO) |
| 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/PwPQoaq) |
| yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/gbavpJq) |
| 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/yyYveME) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/KwdQzbw) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/xbwpxyB) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/MYaQpvB) |
| 小羊 | [CodePen](https://codepen.io/allen9630308/pen/yyYvPaa) |
|wei_rio|[CodePen](https://codepen.io/wei_wu/pen/jEbZxKx)|
|肉桂卷|[CodePen](https://codepen.io/ginnlee/pen/MYaVyEM)|
|Momoze|[CodePen](https://codepen.io/mleczmam-the-typescripter/pen/OPyvwpq)|
| Clove_墨 |[CodePen](https://codepen.io/CloveTseng1026/pen/azvYgom)|
| Momoze |[CodePen](https://codepen.io/mleczmam-the-typescripter/pen/OPyvwpq)|
| 白雪 |[CodePen](https://codepen.io/weiwei032835-the-styleful/pen/raOvNbw)|
| Clarence |[CodePen](https://codepen.io/Clarence-Lin/pen/JoYvpxX)|
| Rexlin |[CodePen](https://codepen.io/Rexlin595/pen/ZYbodbz)|
| William Hsieh |[CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/WbQypXw)|
| Chen |[CodePen](https://codepen.io/JGM-C/pen/XJmYage)|
| 叮咚 |[CodePen](https://codepen.io/pinchieh-lin/pen/gbaKBKg)|
| ScarT | [CodePen](https://codepen.io/Acadia/pen/EaVpdaL) |
| Toung | [CodePen](https://codepen.io/Toung/pen/vENVQMy) |
|Joe| [CodePage](https://codepen.io/wasp33/pen/dPYQzVN)|

<!--

| user | [CodePen]() |

-->