---
title: 第二週團隊任務-第3組
tags: Vue直播班 - 2022 冬季班
---
###### tags: `2022 Vue直播班` `冬季班` `六角學院`

:arrow_backward: [回到目錄](https://hackmd.io/zEo77jAnSH-C9q1ADR-i4Q)

# 第二週團隊任務-

||組員名單|簽到|
|-|---|---|
|1| albee#9121 |:heavy_check_mark:|
|2| Amberhh#2465 |:heavy_check_mark:|
|3| 艸良#2846 |:heavy_check_mark:|
|4| bakiii#2652 |:heavy_check_mark:|
|5| hannahTW#2224 |:heavy_check_mark:|
|6| Asher Xu#9297 |請假|
|7| RT#2151 |:heavy_check_mark:|
|8| leoli#3882 |:heavy_check_mark:|
|9| Eason#7884 |:heavy_check_mark:|
|10| Fannie#7800 |請假|

# 討論工具 : Discode

## 挑戰一：你有在寫筆記嗎？
學習的過程中，建立自己的筆記是非常重要的，與夥伴分享自己常用的筆記工具，以及這項筆記工具有什麼優點吧！

- 每個組員選擇一項自己喜歡筆記工具進行分享（付費、免費均可）
- 工具可重複分享，只要在頻道內說明
- 為什麼選擇這套工具（想解決的問題）
- 你如何進行運用（解決方案）
- 其它你也很喜歡的部分
- 或者，也可以說說它的缺點
- 更多分享內容參考：
- 筆記的撰寫方式（word, markdown...）
- 分類方式
- 儲存方式（雲端、本機）
- 裝置系統（蘋果限定或任何系統）
- 是否可分享
- 圖片、檔案加入
- 獨特賣點
- 計費或免費
- 個人愛好：使用多久了、與其它的比較、缺點介紹、可加強的部分

### 常見筆記工具分享

- https://evernote.com/intl/zh-tw
- https://www.notion.so/ -> 卡斯伯用這套
- https://bear.app/ -> 卡斯伯用這套
- https://joplinapp.org/
- Google、微軟等廠商的文件工具

||組員名單|筆記工具分享|
|-|---|---|
|1| albee#9121 |手寫筆記(偶爾Notion/HackMD)|
|2| Amberhh#2465 |HackMD|
|3| 艸良#2846 |Notion|
|4| bakiii#2652 |HackMD (觀望Bear中)/MAC的備忘錄XD|
|5| hannahTW#2224 |[HackMD/Notion/手寫](https://hackmd.io/iaZE9c11REC8Uax0m7fUww?view)|
|6| Asher Xu#9297 |請假 HackMD/Notion(嘗試使用中) |
|7| RT#2151 |Notion|
|8| leoli#3882 |Notion/HackMD|
|9| Eason#7884 |Notion/HackMD|
|10| Fannie#7800 |Notion為主|

## 挑戰二：團隊測驗

完成團隊測驗：https://bejewled-air-4cb.notion.site/02e9357bec3e4b5fb998ad0d796799fb

填寫表單：https://docs.google.com/spreadsheets/d/19mtRb9kTDrv9nbEouu9M42IITmBY82_IA-OEAQxgwXo/edit#gid=8448846

| 題目 | 小組答案 | 正確答案 |
| --- | --- | --- |
| 題目 01 |1 | :heavy_check_mark: |
| 題目 02 |1 卡斯柏| :heavy_check_mark: |
| 題目 03 |4| :heavy_check_mark:|
| 題目 04 |2| :heavy_check_mark:|
| 題目 05 |/v2/api/{api_path}/admin/products/all|:x: /v2/api/{api_path}/products/all |
| 題目 06 |3 const 與 let 宣告 => block scope(區塊作用域)| :heavy_check_mark: var 宣告的變數 > 會出現在 window 上 |
| 題目 07 |2 小明|:heavy_check_mark:|
| 題目 08 |2 小明|:heavy_check_mark:|
| 題目 09 |1 全域|:heavy_check_mark:|
| 題目 10 |1 小明x3 |:heavy_check_mark:|
| 題目 11 |2 不正確|:heavy_check_mark:|
| 題目 12 |3 mounted|:heavy_check_mark:|
| 題目 13 |2 錯誤|:heavy_check_mark:|
| 題目 14 |2|:heavy_check_mark:|
| 題目 15 |4|

:::warning
資源補充: https://israynotarray.com/javascript/20210718/956160363/
:::

# 第二週相關知識點:
## :rocket:Promise 同步與非同步
* https://www.casper.tw/development/2020/02/16/all-new-promise/

## :rocket:This 的指向
>* 直接呼叫函式的情況下，this 會指向全域
>* 立即函式屬於 simple call，this 是指向全域。

## :rocket:關注點分離
### 什麼是關注點分離
將不同的功能分開處理，大多專注在資料處理上，渲染的事情就交由Vue去渲染，畫面與資料的工作分開來做
在處理資料的時候，不會把DOM元素放到任何METHOD或DATA處理，關注點分離就是避免寫再一起搞混
#### JS傳統開發方式 圖1
用下圖來解釋:
原本利用JS抓取文字並將文字渲染到網頁上時，渲染會使用到innerHTML等方式寫到HTML上，所以在JS上面會寫到HTML的語法

會造成麻煩的問題
1. 抓取文字也是寫在JS上，也是固定的要改變也是要在JS檔案上面修改，管理不易
#### 關注點分離 圖2
透過關注點分離的概念開發時，資料與畫面不像用 JS 寫的時候都參雜在一起，反而是畫面跟資料分開處理，在抓取文字方面就只要關注在資料庫上的資料分析，不用在想渲染的事情，在一個地方做一件事情，渲染的事情就交給框架幫忙渲染

## :rocket:Vue 元件初始化

* beforeCreate：實體初始化。
* Created：實體建立完成。資料 $data 已可取得，但 $el 屬性還未被建立。
* beforeMount：執行元素掛載之前。
* mounted：元素已掛載， $el 被建立。
* beforeUpdate：當資料變化時被呼叫，還不會描繪 View。
* updated：DOM 的更新已經完成，View 被顯示在畫面上。
* activated：如果有設定 keep-alive，這個掛鉤會被呼叫。
* deactivated：停用 keep-alive時被呼叫。
* beforeDestroy：實體還可使用。
* destroyed：實體銷毀。所有綁定被解除、事件偵聽被移除、子實體也被銷毀。
>註：它們的資料型態全都是 Function。

## :rocket:Vue 起手式
>基本寫法:

Vue.createApp({
    data() {
        return{ ... }
    },
    methods:{  ...  },
    mounted: function(){  ... },
}).mount('DOM元素')