Tweet
Tweet

Slide 1

Slide 1 text

Vue.js 3.0 與 Composition API 變⾰革 Kuro Hsu

Slide 2

Slide 2 text

Kuro Hsu - Front-End Developer - Organizers of Vue.js Taiwan - https://kuro.tw - [email protected] - @kurotanshi

Slide 3

Slide 3 text

Vue 3.0 發展近況 • 10/05 發布 pre-alpha 原始碼 • 預計 Q1 2020 推出正式版本 • Vue Roadmap - https://github.com/vuejs/vue/ projects/6

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

• ⽬目標是更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性 • 提⾼高可維護性 • 開放更更多底層功能

Slide 7

Slide 7 text

• Object.defineProperty -> Proxy API • Virtual DOM 重構 • 增強編譯時的優化

Slide 8

Slide 8 text

https://github.com/vuejs/vue-next

Slide 9

Slide 9 text

Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大 • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定

Slide 10

Slide 10 text

Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大 • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定 CANCELED

Slide 11

Slide 11 text

Composition API

Slide 12

Slide 12 text

! Composition API • 先前叫 function-based API • 以「組合代替繼承」來來實作元件功能的複⽤用 • 對 TypeScript 類型推導的⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮

Slide 13

Slide 13 text

對比過去做法

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Mixins

Slide 16

Slide 16 text

HOC: Higher-order Components

Slide 17

Slide 17 text

Props 來來源不清晰 Props namespace 衝突問題 多餘的元件實體造成性能浪費 HOC: Higher-order Components

Slide 18

Slide 18 text

Renderless Components

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

https://github.com/vuejs/composition-api/ Install

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ref( ) • ref( ) 會為元件⽣生成⼀一個 響應式的屬性 (同原本的 data) • 透過 value 屬性存取

Slide 25

Slide 25 text

reactive( ) • 意義上等同於 v2.x 的 Vue.observable( ) • 無需透過 .value 存取

Slide 26

Slide 26 text

watch( ) • 與 v2.x 的 watch 同樣

Slide 27

Slide 27 text

computed( ) • 與 v2.x computed 屬性的⾏行行爲、作⽤用 完全⼀一樣

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

https://github.com/kurotanshi/vue-composition-api-demo

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

與 React Hooks 對比 • 兩兩者同樣為了了處理理邏輯組合與複⽤用問題 • Vue setup( ) 只會在 init 被呼叫⼀一次 • 沒有 State Hooks 的閉包陷阱 • 沒有內聯聯函式 callback 導致⼦子組件不斷被觸發更更新問題

Slide 37

Slide 37 text

https://slides.com/hunterliu1003/vue-rfcs/ 其他沒提到的 3.0 特性

Slide 38

Slide 38 text

新⼿手入坑 應該等到 3.0 釋出再學嗎?

Slide 39

Slide 39 text

• 官⽅方保證 2.x -> 3.x ，完全相容現有 API • 加強對 TypeScript ⽀支援 !== 只能⽤用 TypeScript • 更更多的是針對底層的改寫，對多數開發者來來說沒有明顯差距

Slide 40

Slide 40 text

期待 Vue 3.0 早⽇日到來來

Slide 41

Slide 41 text

Vue.js Taiwan https://vue.tw

Slide 42

Slide 42 text

Thanks