# Vue2 SKA

### 什麼是前後端分離 ？

前後端分離就和 MVC 一樣是一種架構模式

所謂的 **前端** 主要負責頁面渲染，關注點在於使用者（Client-Side）
而 **後端** 負責商業邏輯判斷與提供數據，關注點在於系統（Server-Side）

由後端提供接口給前端進行資料串接，前端後端的技術不會互相依賴影響

:::success
**優點**

職責清晰
提高前端開發的可控性（可以自行應用框架）
:::
:::danger
**缺點**

對 SEO 比較不友善，還需要透過 Server Side Rendering
:::

----
### 為什麼使用 Vue 想解決的痛點？

#### 相較於原生 JS

* 程式可讀性
* Component 的重用性
* 控制資料而非控制 DOM 節點
* 適合進行測試
* 資料與 UI 分離

#### 相較於其他框架

##### 優點

* 學習曲線平滑
* 文件幾乎都有支援中文
* 基於 HTML, CSS, JS, 模板語法支援 HTML
* 只會根據改動部分進行重新渲染
* 關注點在於資料、資料繫結

##### 缺點

* 插件數量少於其他框架

---

### 為什麼建議 Key 不要用 Array Index

#### 簡單測試

簡單測試一下如果把 Array Index 作為 v-for 的 key 會花生省魔術
https://jsfiddle.net/asd12457932/8zdkfs04/32/

#### DOM 重用

Vue 會為了效能重複使用已經渲染過的 DOM 節點

Array Index 會因為資料的新增或刪除有變動
如果使用 Array Index 作為 DOM 的 Key，Key 會隨著 Array 的變化跟著變

Array Index 是序列化的，當資料增減遞補的過程會容易導致有重複的 Key
Vue 就會將重複的 DOM 節點拿來再利用

---

### Watch Computed Method 的差別是什麼

#### 執行時機

| 屬性 | 執行時機 |
| -------- | -------- |
| `method` | 每次呼叫就會執行 |
| `watch` | 監視的項目有變動就會執行 |
| `computed` | 會將結果暫存，並根據關注的屬性變化決定會不會執行 |

#### 資料更動
| 屬性 | 參數 |
|:---------- | ------------------------------------ |
| `method` | 可以帶入參數，如同一般的 function |
| `watch` | 因監視的項目有變動就會執行，適合執行異步或複雜的動作，可以響應不斷變化的數據 |
| `computed` | 有 getter & setter attribute 控制要回傳或獲取的資料，無法帶入參數 |

---

### 為什麼不能在 before Created 發 API

在 beforeCreate 的時候，實體還沒被建立
所以 options ( `prop` `data` `methods` `watch` `computed` ) 都還不能被使用

API 傳送回來的 Response 沒有辦法立即更新至 option

---

### 為什麼不能改父元件傳下來的 Props

Vue 的 `Prop` 資料流是單向的，主要原因是不讓子元件可以任意更改父元件的值，call by reference 容易牽一髮動全身，其他子元件的 `Prop` 會跟著變動

如果要在子元件處理資料的話，可以使用 `computed` `local variable` 來進行處理
但要避免更改到父元件的值所以可以複製一份物件或用陣列