# 🏅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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
|Michael|[CodePen](https://codepen.io/RenHuang-Huang/pen/LYKmwvB)|
|77|[CodePen](https://codepen.io/Chichi-Chen/pen/YzoxOKq)|
|mu mu|[CodePen](https://codepen.io/ishuki916/pen/BagdONw)|
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/MWMvqeZ) |
|阿B|[CodePen](https://codepen.io/Abby-Chou/pen/PorKdmO)|
|anderson666|[CodePen](https://codepen.io/goodmanbuild/pen/vYqJzJx)|
|Aden|[CodePen](https://codepen.io/Osases/pen/vYqJzpm)|
| Tough life |[CodePen](https://codepen.io/hakuei0115/pen/XWLaPer)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/VwJzGGb) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/wvLqEQE) |
| rjjq | [CodePen](https://codepen.io/rjjq/pen/MWMvPBb) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/QWXMZJy) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/vYqJVQv) |
| 皮克 | [CodePen](https://codepen.io/yen-kg/pen/oNRROLv) |
| Fabio | [CodePen](https://codepen.io/fabio7621/pen/PorKXBR) |
| Anna | [CodePen](https://codepen.io/anna971053/pen/zYVdXQr) |
| 好了啦 |[CodePen](https://codepen.io/j-z-the-flexboxer/pen/mdZMYZg) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/JjQrPyy) |
| YO | [CodePen](https://codepen.io/Y-1717/pen/wvLraVB) |
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/bGPoVbd) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/eYwGpOR) |
| KK | [CodePen](https://reurl.cc/OrkyVg) |
| willy0719 | [CodePen](https://codepen.io/DOBEST/pen/wvLrMZE) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/vYqeGJr) |
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/LYKzRLp) |
| Rumi | [CodePen](https://codepen.io/Tzuru-Chen/pen/oNrGYop) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/dyBVWMz) |
| Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/KKjXqdg)
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/vYqepQm)
| sandra191919 | [CodePen](https://codepen.io/a0960529965/pen/NWZayjm) |
| zhen | [CodePen](https://codepen.io/yunnnz/pen/QWXqQgX) |
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/QWXqQdR) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/BagwvjW) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/MWMELOw) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/xxoXMdg) |
| Abby | [CodePen](https://codepen.io/abby1125/pen/KKjXJJp) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/xxoXvVe) |
| JC | [Codepen](https://codepen.io/jy_123/pen/jOjGgxp) |
| Barry1104 | [Codepen](https://codepen.io/barry1104/pen/JjQOGJg) |
|HsienLu|[codepen](https://codepen.io/Hsienlu/pen/LYKOGJp)|
| dodo | [CodePen](https://codepen.io/MissDouble/pen/WNqXpjX) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/KKjyxOG)|
| Renee |[Codepen](https://codepen.io/renee_wu/pen/gONXZJR)|
| Danny | [CodePen](https://codepen.io/danny666/pen/wvLpyqj) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/zYVpXdL) |
| CharisLai | [CodePen](https://codepen.io/charislai/pen/eYwVEOW) |
| cami | [CodePen](https://codepen.io/irisLife/pen/poXaxOq)|
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/ZEdoLBN)|
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/JjQvvaL) |
| Ching | [CodePen](https://codepen.io/huangching/pen/KKjJWWW) |
| Triple | [CodePen](https://codepen.io/riku30/pen/BaggzLW) |
| Eden |[Codepen](https://codepen.io/iseden/pen/rNXMREP)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/gbOLxor)|
<!--

| user | [CodePen]() |

-->