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

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

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

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

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615 | [Codepen](https://codepen.io/wendy03/pen/ZEMbNYO) |
| 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/eYLpamd) |
|ㄚ翔#8126|[Codepen](https://codepen.io/engineerjohnson/pen/WNgQBQN)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/YzOybXj?editors=1010)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/QWVjRNw)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/MWqadye)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/xxawNVP) |
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/vYzNwZv)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/YzOybxR)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/JjaYqOv)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/dyqYEvj)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/RwYWmxd)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/GRXpadb)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/ZEMbNPa?editors=1010)|
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/BaOoebj?editors=1011)|
|法希娜#3206|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/yLxYdyP)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/yLxYdep?editors=1010)|
|Potatolee#7749|[Codepen]( https://codepen.io/potatoleee/pen/abavgdQ)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/eYLpwEL)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/ExeVBXr)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/dyqYxXN)|
|Jill Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/rNZOXpV)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/jOvWNJy)|
|出事了阿伯#9923|[codepen](https://codepen.io/BradpittLai/pen/gOdPOpa?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[codepen](https://codepen.io/sho666/pen/VwGewxv?editors=1011)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/yLxeNmo?editors=1010)|
|小木馬#8760|[CodePen](https://codepen.io/wmmtbcsd/pen/bGxEEgj)|
|hannahTW#2224|[CodePen](https://codepen.io/hangineer/pen/jOvWqrP?editors=1010)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/YzOwqKL)|
| 楊苡安#2752 |[CodePen](https://codepen.io/yi-an-yang/pen/JjaGKRx?editors=1111)|
|MengLin#3001|[CodePen](https://codepen.io/aacj2642/pen/eYLJddw)|
|Austyn#0949|[CodePen](https://codepen.io/fish90547/pen/MWqKbXp)|
Zack_P#1805|[CodePen](https://codepen.io/tmzazirh-the-animator/pen/YzOwpjB?editors=1010)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/bGxELaG) |
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/NWLxYGR)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/yLxBKQO)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/LYJNjbV)
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/ZEMWMYM?editors=1010)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/abaZgyE?editors=1011)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/ExegdKY?editors=1011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/WNgQBVR)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/eYLRGVe)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/wvEqYGZ)
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/eYPRdEe)