# Vue.js 3.0 與 Composition API 的變革 - Kuro Hsu

{%hackmd MNcuRlXoQDak0uCmtaJKwA %}

###### tags: `MOPCON 2019`

* [Vue Roadmap](https://github.com/vuejs/vue/projects/6)

- 10/05 [Vue 3.0 Pre Alpha](https://github.com/vuejs/vue-next)

> 參考 Reference : VueConf2019SH_Evan

* 目標是更小更快
* 加強對 TypeScript 的支援
* 加強 API 的一致性
* 開放框架底層的擴充功能
* 畫面更新偵測API: Object.defineProperty => Proxy API (IE不支援，來跟舊瀏覽器說掰掰)

> Virtual DOM　重構
> 增強編譯時的優化

### Class API
- 為了增強與 TypeScript 的支援
- 與現有 API 的相容性差異太大
- 瀏覽器對原生 API 的支援還不夠完整

### Composition API
- 先前叫 function-based API
- **組合代替繼承** 實踐元件功能的reuse
- 對 TypeScript 類型推導的支援更好
- Tree-shaking friendly, 編譯後程式碼更容易被壓縮

### Mixins

:-1: 可能造成 Namespace 衝突
:-1: 從 Mixins 引入的 options 難以追蹤來源

> 參考 Reference : VueConf2019SH_Evan

### HOC: Higher-order Components

_大腸包小腸_ 三層以內的還算能維護，超過就很難追蹤來源

> 參考 Reference : VueConf2019SH_Evan

:-1: Props來源不清晰
:-1: Props namespace confliction
:-1: 多餘的元件實體造成性能浪費

### Renderless Components

> 參考 Reference : VueConf2019SH_Evan

:+1: options 來源清晰
:+1: 無 namespace 衝突問題
:-1: 多餘的元件實體造成性能浪費

### Composition API
:+1: 資料來源清晰
:+1: 無 namespace 衝突問題
:+1: 不會產生元件實體造成性能浪費

Vue 2.0 可額外安裝套件以便使用：
https://github.com/vuejs/composition-api/

### setup()
- 沒有 this
- 將共用邏輯放在 setup 函式
- 透過 context 參數取得原本在 this 對應的屬性
- 將需要暴露的屬性 return 出去

### 解決 mixin
- 撞名問題

> Composition API 很像是 React 的 Hooks，以及包含 React 的 Custom Hooks 的精神，讓原本重複的邏輯可以拆成很像是普通的 function，在需要時 import 進來就可以使用。

### Demo
[Github: kurotanshi/vue-composition-api-demo](https://github.com/kurotanshi/vue-composition-api-demo)

### ref()
- 生成一個響應式的屬性 (如 react 的 state hook)
- 透過 .value 屬性存取

### reactive()
- 意義上等同於 V2.x 的 Vue.observable()
- 無須透過 .value 屬性存取

### Lifecycle hooks
- 將原本 Lifecycle hooks 透過 onXXX 的形式來對應

### 與React Hooks對比
- 兩者同時為了處理元件複用
- Vue setup() 只會在 init 被呼叫一次
- 沒有React Hook 的Garbage Colleciton和Life Cycle問題，React Hook 開發者必須要自己優化。

[Vue RFCs 簡報](https://slides.com/hunterliu1003/vue-rfcs)

[Vue社團](https://vue.tw)