[MOPCON 2019] Vue.js 3.0 與 Composition API 的變革

從去年開始，Vue 3.0 的消息就不斷傳出，直到今年 Vue.js 的作者尤雨溪在 VueConf 上海的演講，讓我們終於可以看見 Vue 3.0 一個比較完整的樣貌。

而其中改變最多，也是爭議最大的一個新特性，當屬 Composition API 了。

這場議程中，我將為各位介紹 Class API 被取代的原因，以及 Vue 3.0 為什麼寧可延後推出，也要改用 Composition Functions？ 它解決了什麼問題？ 以及它帶來的優勢。

Transcript

1. Vue.js 3.0 與 Composition API 變⾰革 Kuro Hsu
2. Kuro Hsu - Front-End Developer - Organizers of Vue.js Taiwan - https://kuro.tw - kurotanshi@gmail.com - @kurotanshi
3. Vue 3.0 發展近況 • 10/05 發布 pre-alpha 原始碼 • 預計 Q1 2020 推出正式版本 • Vue Roadmap - https://github.com/vuejs/vue/ projects/6
6. • ⽬目標是更更⼩小、更更快 • 加強對 TypeScript 的⽀支援 • 加強 API 設計⼀一致性 • 提⾼高可維護性 • 開放更更多底層功能
7. • Object.defineProperty -> Proxy API • Virtual DOM 重構 • 增強編譯時的優化
8. https://github.com/vuejs/vue-next
9. Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大 • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定
10. Class API • 為了了增強與 TypeScript 的⽀支援 • 與現有 API 的相容性差異異太⼤大 • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整 • 標準對 class fields, decorators 等提案還不穩定 CANCELED
11. Composition API
12. ! Composition API • 先前叫 function-based API • 以「組合代替繼承」來來實作元件功能的複⽤用 • 對 TypeScript 類型推導的⽀支援更更好 • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮
13. 對比過去做法
14. Mixins 可能造成 Namespace 的衝突 從 Mixins 引入的 options 難以追蹤來來源
15. Mixins
16. HOC: Higher-order Components
17. Props 來來源不清晰 Props namespace 衝突問題 多餘的元件實體造成性能浪費 HOC: Higher-order Components
18. Renderless Components
19. Renderless Components options 來來源清晰 無 namespace 衝突問題 多餘的元件實體造成性能浪費
20. 資料來來源清晰 無 namespace 衝突問題 不會產⽣生元件實體造成性能浪費 Composition API
22. https://github.com/vuejs/composition-api/ Install
23. setup ( ) • 將共⽤用邏輯放在 setup 函式 • setup( ) 沒有 this • 透過 context 參參數取得原本在 this 對應的屬性 • 將需要暴暴露的屬性 return 出去
24. ref( ) • ref( ) 會為元件⽣生成⼀一個 響應式的屬性 (同原本的 data) • 透過 value 屬性存取
25. reactive( ) • 意義上等同於 v2.x 的 Vue.observable( ) • 無需透過 .value 存取
26. watch( ) • 與 v2.x 的 watch 同樣
27. computed( ) • 與 v2.x computed 屬性的⾏行行爲、作⽤用 完全⼀一樣
28. Lifecycle hooks • 將原本 Lifecycle hooks 透過 onXXX 的形式來來對應
30. https://github.com/kurotanshi/vue-composition-api-demo
36. 與 React Hooks 對比 • 兩兩者同樣為了了處理理邏輯組合與複⽤用問題 • Vue setup( ) 只會在 init 被呼叫⼀一次 • 沒有 State Hooks 的閉包陷阱 • 沒有內聯聯函式 callback 導致⼦子組件不斷被觸發更更新問題
37. https://slides.com/hunterliu1003/vue-rfcs/ 其他沒提到的 3.0 特性
38. 新⼿手入坑 應該等到 3.0 釋出再學嗎?
39. • 官⽅方保證 2.x -> 3.x ，完全相容現有 API • 加強對 TypeScript ⽀支援 !== 只能⽤用 TypeScript • 更更多的是針對底層的改寫，對多數開發者來來說沒有明顯差距
40. 期待 Vue 3.0 早⽇日到來來
41. Vue.js Taiwan https://vue.tw
42. Thanks