# 🏅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 / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/yyYpgVb) |
| DaRon | [CodePen](https://codepen.io/daron0811/pen/ogjpBQr) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/qEOpmNm) |
| wanghuaiying | [Codepen](https://codepen.io/huaiying/pen/bNVaRgE)
| dean | [Codepen](https://codepen.io/ch933114/pen/VYvyyeL) |
| Gui | [CodePen](https://codepen.io/guitimliu/pen/XJmVZrb) |
| Sam | [CodePen](https://codepen.io/Sammy-the-styleful/pen/wBKpyKY) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/PwPEBwr) |
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/EaVoeMa)|
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/jEbYvgd) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/NPGXEPP) |
| 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/azvERMy) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/RNWxdZm) |
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/azvEPvM) |
| 地呱 | [Codepen](https://codepen.io/LHung/pen/azvExLe) |
| David0799 | [Codepen](https://codepen.io/David0799/pen/jEbBxZB) |
| 阿昌 | [Codepen](https://codepen.io/ychleo102615/pen/gbavOBp) |
| yu005620 | [Codepen](https://codepen.io/yu-chin-chiang/pen/XJmZmmg) |
| Loder | [Codepen](https://codepen.io/rgbkomhs-the-flexboxer/pen/vENdLxL) |
| 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/WbQMrJz) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/NPGyRrg) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/dPYdvdY) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ZEdrwER)|
| 小羊 | [Codepen](https://codepen.io/allen9630308/pen/bNVLYqN)|
| Candace | [Codepen](https://codepen.io/Candace802/pen/MYaQVRE)|
|wei_rio|[CodePen](https://codepen.io/wei_wu/pen/KwdQRbB)|
|阿Kai|[CodePen](https://codepen.io/kaihuang3013/pen/ZYbveYM)|
|肉桂卷|[CodePen](https://codepen.io/ginnlee/pen/QwjmEYE)|
|Momoze|[CodePen](https://codepen.io/mleczmam-the-typescripter/pen/dPYmqXr)|
| Clove_墨 |[CodePen](https://codepen.io/CloveTseng1026/pen/yyYKmzP)|
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/myepqKy) |
| jimmy | [CodePen](https://codepen.io/JimmyMao/pen/pvjVOob) |
| Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/ogjdrYW) |
| 白雪 | [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/ogjygwa) |
| Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/ogjdqGo) |
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/KwdeqxP) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/QwjByNW) |
| ScarT | [CodePen](https://codepen.io/Acadia/pen/dPYjggy) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/ByoqVwa) |
| Toung | [CodePen](https://codepen.io/Toung/pen/jEbQzjx) |
<!--

| user | [CodePen]() |

-->