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

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
October 20, 2019

[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? 它解決了什麼問題? 以及它帶來的優勢。

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

October 20, 2019
Tweet

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
  4. None
  5. None
  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

  21. None
  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 的形式來來對應

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

  31. None
  32. None
  33. None
  34. None
  35. None
  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