---
title: Vue 3 daily task
tags: 六角學院, Vue 3 新手夏令營
date: 2021/8/2
---

###### tags: `六角學院` `Vue 3 新手夏令營`

###### *date: 2021/8/2*

# 📜 最後的每日任務

[TOC]

## 8/2 (一) 實戰演練，mounted 與 created

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/RwVvrbd?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/RwVvrbd">
</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### mounted 與 created 生命週期的差異

>- 因為 created 的生命週期不包含渲染 HTML ，是在渲染 HTML 之前執行
>- mounted 則是已經完成 HTML 的渲染，即在渲染 HTML 之後執行
>- 資料需要與 DOM 或 HTML 部分做交互 會建議把初始化放在 mounted 中執行
>- 若不需要 則建議在 created 中就初始化 因為 created 比 mounted 更早執行
>[name=雅萱 WangShuan]

---

## 8/3 (二) 實戰演練，watch 監聽

<iframe height="300" style="width: 100%;" scrolling="no" title="" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/vYmbLNP?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/vYmbLNP">
</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `watch`技術重點

- `watch`監聽的數值改變，就會改變`data`的值
- `watch`與`computed`不同的地方是，對`data`的影響

---

## 8/4 (三) 實戰演練，watch 深層監聽

<iframe height="300" style="width: 100%;" scrolling="no" title="8/4 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/KKmJVMa?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/KKmJVMa">
8/4 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 深度監聽技術重點

- 一般監聽，會忽略掉物件裡面屬性的變動
- 深層監聽，連物件裡面的屬性變動都監聽的到

---

## 8/5 (四) 實戰演練，在 Composition 內使用 ref

<iframe height="300" style="width: 100%;" scrolling="no" title="8/5 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/ZEKwQBX?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/ZEKwQBX">
8/5 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `Composition`中`ref`技術重點

- `Composition`需要依靠`ref`做雙向綁定

---

## 8/6 (五) 實戰演練，改變 ref 的值

<iframe height="300" style="width: 100%;" scrolling="no" title="8/6 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/ExmrPZL?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/ExmrPZL">
8/6 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `ref`技術重點

- 如果要修改`ref`的值，需要使用`.value`取值

---

## 8/9 (一) 實戰演練，在 Composition 內使用 reactive

<iframe height="300" style="width: 100%;" scrolling="no" title="8/9 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/mdmvVwb?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/mdmvVwb">
8/9 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `reactive`技術重點

- `reactive`必須是物件型態
- `reactive`取值的方法就跟普通物件一樣

---

## 8/10 (二) 實戰演練，在 Composition 內使用 methods

<iframe height="300" style="width: 100%;" scrolling="no" title="8/10 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/NWjoxvR?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/NWjoxvR">
8/10 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `Composition`中`methods`技術重點

- 在`Composition`中`methods`使用賦值語句 + 箭頭函數
- 在`Composition`中`methods`的同一種功能邏輯，可以寫在一起

---

## 8/11 (三) 實戰演練，Composition 中的生命週期

<iframe height="300" style="width: 100%;" scrolling="no" title="8/11 Vue 3 新手夏令營" src="https://codepen.io/vsfvjiuv-the-typescripter/embed/oNWmbpV?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/vsfvjiuv-the-typescripter/pen/oNWmbpV">
8/11 Vue 3 新手夏令營</a> by Johnson Mao (<a href="https://codepen.io/vsfvjiuv-the-typescripter">@vsfvjiuv-the-typescripter</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### `Composition`中生命週期的技術重點

- 引用之後，使用傳回調函數的方式
- 需要注意大小寫

{%hackmd @JohnsonMao/theme-Wood-Fired %}