###### tags: `學期 3`

# Vue 101 工作坊 -- 2021/8 月班會後精華

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/592587993" frameborder="0" allowfullscreen></iframe></div>

<div style="padding:15px;"></div>

--

#### 同學會後心得
本次活動滿意度：4.1 ⭐️

🗣 了解到蠻多前端框架的一些比較基本的比較知識（框架和dom的差異）

🗣 團隊開發的說明很有意思，吸收到很多觀念

--

#### 活動使用投影片

##### 工作坊
<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://docs.google.com/presentation/d/e/2PACX-1vRrRpIVxhnCsDNFR1kBasXO17_oKJGVmkBppTTG2x3Y2aTNuGPcqk7U84ReNtKOCvV9UBumcRXZTO7C/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>

---

# 熱身，你會怎麼實作？

請同學玩玩看這個 [My Todo](https://codepen.io/alpha-camp/pen/bGpOQVM)，想想看你會怎麼實作？

### 主要有兩種做法，可以根據情況來選擇：

1. 直接操作 DOM
2. 將資料從視覺抽離，用資料帶動畫面改變

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16430/_____2021-08-30___14.10.32___.png"></a></div>

---

# 三個迭代版本

1. 最傳統的 DOM 操作：[https://codepen.io/alpha-camp/pen/bGpOQVM](https://codepen.io/alpha-camp/pen/bGpOQVM)
2. 導入 Template 概念：[https://codepen.io/alpha-camp/pen/JjXweGY](https://codepen.io/alpha-camp/pen/JjXweGY?editors=0010)
3. 使用 Vue 框架：[https://codepen.io/alpha-camp/pen/zYqyMrO](https://codepen.io/alpha-camp/pen/zYqyMrO?editors=1010)

---

# 思考脈絡

## Step 1. 思考 DOM → Template 差異在哪裡？

- DOM 版本程式碼

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16431/_____2021-08-30___16.02.38___.png"></a></div>
<br>

- Template 版本程式碼

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16432/_____2021-08-30___16.03.00___.png"></a></div>
<br>
<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16429/_____2021-08-30___16.06.39___.png"></a></div>

### **DOM 版本**

- 缺點：直接操作 DOM，沒有資料的概念，沒辦法知道當前的資料狀態

### **Template 版本**

- 優點：
1. 可以清楚知道當前的資料狀態
2. 透過操控資料來改變畫面
- 缺點：
1. 需要主動更新畫面（需要主動呼叫 render function）
2. 畫面全部都重新轉譯的效能較差（刪除一個 todo 則全部 todo 皆重新渲染，資料量大時，效能就會變差）
3. 要自己做很麻煩

## Step 2. 思考 Template 擔任的角色？

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16428/_____2021-08-30___16.08.13___.png"></a></div>

- 當需要產生重複的 HTML 結構時，就可以將它做成模板重複地使用，不管是新增資料、刪除資料或更新資料都可以用同一個模板來渲染

## Step 3. Template → Vue 超級比一比？

同學們可以想想看，邏輯跑到哪裡去了？有什麼東西什麼不見了？以及新東西是什麼？

- Template 版本程式碼

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16434/_____2021-08-30___16.03.00_____1_.png"></a></div>
<br>

- vue 版本程式碼

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16433/_____2021-08-30___16.25.58___.png"></a></div>

### **vue 版本**

- 優點：
1. 資料一改變，畫面就會改變
2. 刪除一筆 todo，畫面不會全部重新渲染，效能比較好
3. 不需要再設定 render 方法了，前端框架幫我們自動渲染
4. 開發流程變成以「資料」為中心來思考

---

# Todo MVC 專案開箱

## TodoMVC 專案簡介

TodoMVC 是一個知名開源專案，所有的框架都用同一種規格開發，功能相同、樣式相同，目前有 64 種框架版本，初學者可以聚焦在功能實現，不用花心思做樣式。

- TodoMVC 網站：[https://todomvc.com/](https://todomvc.com/)
- vue 版本 TodoMVC：[https://todomvc.com/examples/vue/](https://todomvc.com/examples/vue/)

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16427/_____2021-08-30___16.38.34___.png"></a></div>

## 思考實作步驟

### Q1. **先觀看畫面，思考做出下列功能需要哪些資料？**

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16426/_____2021-08-30___16.42.20___.png"></a></div>

功能：

1. 新增 Todo
2. 顯示 Todo 清單
3. 編輯 Todo
4. 下方有篩選器可以選擇顯示的 Todo 清單

### Q2. 這個功能是怎麼實現的？

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16425/_____2021-08-30___16.50.15___.png"></a></div>

### Q3. 這段程式碼是在做什麼？

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16424/_____2021-08-30___16.54.02___.png"></a></div>

## Todo MVC 資料流示意圖

- 當你需要篩選資料時，可以在中間多一層過濾，在渲染到畫面上

<div style="wdith: 100%; text-align: center;"><a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/14939/image.jpeg" target="_blank"><img style="width: 60%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16423/_____2021-08-30___17.03.34___.png"></a></div>

---

# 前端框架學習經驗分享

### Q1：學習新框架的時候，哪些會是可轉移的經驗？哪些需要重新學？

以 Vue vs. React 為例

- **相同處：**更新 data 畫面就會更新 -> 因此理解框架底層概念很重要
- **不同處：**
1. 語法糖不一樣
2. React 沒有 template ，所有東西都由 JS 撰寫

- **結論：**前端框架相似處多，學習轉換時間不會太長，建議可以從 vue 開始學習，門檻較低

### Q2：怎麼上手新框架？

- 最重要的就是官網文件，需要花比較多時間閱讀，上面的例子也可以多練習
- 可以多找小專案實作，衍伸找公開的 API 串接練習，比如天氣盒子、地圖資料串接
- 應用在大專案上

### Q3：學 Vue 2 好？Vue 3 好？

- 雖然 Vue 3 已經推出一段時間，但公司總會有舊的專案是使用 Vue 2 寫的，且有穩定盈利，站在老闆的角度想，重構成 Vue 3 會產生不確定的風險，不一定會去升級，以現在這個時間點來說，Vue 3 還有些功能在實驗性階段，所以現階段還是有學習 Vue 2 的價值。

### Q4：Vue 2 與 Vue 3 的差別在哪裡？

參考資料：[Vue 2.x 至 3.0 快速升級指南](https://book.vue.tw/appendix/migration.html)

- 相同處：
1. computed
2. watch
3. v-if
4. v-show
- 相異處：
1. fiter 功能被刪除
2. 生命週期微調（例如：名稱改變）
3. 一些好用的新功能：Composition API
4. 實驗性功能：動態改變樣式（[Link](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md)）