---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 41 - $refs 生命週期陷阱

觀看完課程影音「生命週期詳解」後，了解生命週期，練習下方題目。

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

> $refs 生命週期陷阱
> - 請試著將模板中的 created 生命週期替換為 mounted，讓 alert 警告能夠跳出。
> - 本次練習主要是讓同學理解 `created()` 、 `mounted()` 的使用時機

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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


<!-- 解答：
const app = Vue.createApp({
mounted() {
this.$refs.alert.callAlert();
},
})

https://codepen.io/jmimiding4104/pen/LYapLxa

額外挑戰：
https://codepen.io/jmimiding4104/pen/OJqygmN?editors=1111
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/poYMNXE) |
| py | [CodePen](https://codepen.io/Wpypy/pen/YzgmNqg) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/VwRomxd) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/xxBvqMV) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/LYawyLz) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/ExMqXRd?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/KKEOvvx?editors=1010) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/RwdXjbd) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/MWxNRJP?editors=1010) |
|Eden|[Codepen](https://codepen.io/iseden/pen/VwRoJBO)|
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/vYMBEbx?editors=1010)|
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/mdgbVbe) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/OJGLjez) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/RwObxOp) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/mdgbGLO)|
| Uli | [CodePen](https://codepen.io/uli1313/pen/LYvYGEq?editors=1010) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/abxbZqE) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/PogoKrj) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/BaEyQqx?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/ZEZYrmd) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/ZEZGVKe) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/RwOrvxX) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/poBbJYP) |

<!--
| user | [CodePen]() |
-->