# 🏅Day11 - Vue.js 的黑魔法：Watch

## Watch

`watch` 通常用來監聽資料的變化並在資料變化時執行特定的操作，

在處理響應式資料時很常會用到，特別是當需要根據資料的變化來觸發一些操作。

例如下面的範例是一個簡單利用 `watch` 來做驗證欄位的方式，

當輸入框發生變化時，會即時的驗證輸入的內容，並且顯示出錯誤。

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

## 監聽多個目

這裡也可以使用一個 `watch` 搭配陣列的方式來監聽多個欄位，例如以下範例：

* 新增了 `Username`、`Phone` 的欄位，當輸入框發生變化時，會同時驗證其他的欄位。

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

## 深層監聽 deep

`deep` 是用來深層監聽物件內部的變化，當要監聽物件內的資料時，

就必須在結尾處加上 `deep`，例如以下範例：

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

## 即時監聽 immediate

將 `immediate` 選加入到 watch 中，這樣監聽器會在監聽對象初始化時立即執行一次，

例如下面範例，在還沒輸入觸發欄位之前，一進畫面就立即先觸發驗證功能了。

<iframe height="300" style="width: 100%;" scrolling="no" title="Composition API：watch 範例 (3)" src="https://codepen.io/yen-kg/embed/OJYeowm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/OJYeowm">
Composition API：watch 範例 (3)</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/MWdMqqP)，執行以下要求（只能操作 script 的部分）：

* 請利用 `watch` 的方式，替「**購買人姓名**」的 `input` 加上欄位驗證，需合下面條件：

**條件：名稱欄位需要剛好三個字，否則就顯示「需要正確的輸入名稱」的紅字提示。**


## 回報流程

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


<!-- 解答：
watch(() => user.value.username, (newVal) => {
if (newVal.length === 3) {
errors.value.username = '';
} else {
errors.value.username = '需要正確的輸入名稱';
}
});
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| Michael | [CodePen](https://codepen.io/RenHuang-Huang/pen/GRbGKMJ) |
| anderson666 | [CodePen](https://codepen.io/goodmanbuild/pen/vYqezWX) |
| kuolun | [CodePen](https://codepen.io/kuolun/pen/yLdzxxZ) |
| Aden | [CodePen](https://codepen.io/Osases/pen/PorJdvQ) |
| 末次 | [CodePen](https://codepen.io/yunjulee/pen/jOjGvJQ) |
| Mars | [CodePen](https://codepen.io/MarsKuo/pen/ZEdXqzg) |
| mu mu | [CodePen](https://codepen.io/ishuki916/pen/XWLexRd) |
| 阿B | [CodePen](https://codepen.io/Abby-Chou/pen/ExBwdJv) |
| Shin | [CodePen](https://codepen.io/shin9626/pen/vYqeQmM) |
| Hilda | [CodePen](https://codepen.io/vwquikad-the-vuer/pen/yLdzQRP) |
| Zhu | [CodePen](https://codepen.io/codepenplayer/pen/VwJMGgP) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/PorJXOj)|
|sandra191919| [Codepen](https://codepen.io/a0960529965/pen/JjQreqz)|
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/wvLrREy) |
| Tough life | [CodePen](https://codepen.io/hakuei0115/pen/eYwGxKz) |
| Eric0823 | [CodePen](https://codepen.io/a7901477/pen/GRbMzGY) |
| Kevin Wei | [CodePen](https://codepen.io/kevin21305991/pen/BagwMOb) |
| cherylxie | [CodePen](https://codepen.io/fi7933201/pen/vYqebPz) |
| Anna | [CodePen](https://codepen.io/anna971053/pen/vYqePqE) |
|rjjq| [CodePen](https://codepen.io/rjjq/pen/OJexGrz)|
|YO| [CodePen](https://codepen.io/Y-1717/pen/oNrGRVq)|
| 蛋黃 |[CodePen](https://codepen.io/yiyun12o9/pen/oNrGRrd) |
| KK | [CodePen](https://reurl.cc/7d31Mk) |
| Letitia | [Codepen](https://codepen.io/letitia-chiu/pen/Yzormpy) |
| JC | [Codepen](https://codepen.io/jy_123/pen/rNEYBBB) |
| 皮克 | [Codepen](https://codepen.io/bad-527boy/pen/zYVPYBE) |
|HsienLu|[CodePen](https://codepen.io/Hsienlu/pen/JjQOXGK)|
| 好了啦 |[CodePen](https://codepen.io/j-z-the-flexboxer/pen/KKjyMpV)|
| Yuwen | [CodePen](https://codepen.io/Yuwen-the-reactor/pen/oNroYEe)|
| dodo | [CodePen](https://codepen.io/MissDouble/pen/NWZwjKB) |
| zaoannihao | [CodePen](https://codepen.io/ckhwdvrx-the-solid/pen/jOjawGr) |
| imsmallnew | [CodePen](https://codepen.io/imsmallnew/pen/BagmVwO) |
| SKey | [CodePen](https://codepen.io/Dale-Chien/pen/RwzjqVE) |
| Renee | [CodePen](https://codepen.io/renee_wu/pen/ExBbrXV) |
| Barry1104 | [CodePen](https://codepen.io/barry1104/pen/YzoYPpK) |
| duchi | [CodePen](https://codepen.io/sqaz0502/pen/yLdprdE) |
| anthy7154 | [CodePen](https://codepen.io/hnhmgzbw-the-sans/pen/wvLpVMK) |
| Zhen | [CodePen](https://codepen.io/yunnnz/pen/gONvwza) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/rNEJoyY) |
| ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ZEdrwER)|
| CharisLai | [CodePen](https://codepen.io/charislai/pen/XWLZwXy) |
| cami | [CodePen](https://codepen.io/irisLife/pen/JjQLMJv)|
| Danny | [CodePen](https://codepen.io/irisLife/pen/JjQLMJv)|
| World | [CodePen](https://codepen.io/HexschoolVuePujols/pen/poXVdwG)|
| Tatsu | [CodePen](https://codepen.io/chindesu0207/pen/wvLjXWG) |
| Ching | [CodePen](https://codepen.io/huangching/pen/gONqmop) |
| Triple | [CodePen](https://codepen.io/riku30/pen/poXXBpX) |
| Eden | [Codepen](https://codepen.io/iseden/pen/OJKRYMr)|
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/OPJbOPa)|
<!--

| user | [CodePen]() |

-->