Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Kuro Hsu

October 20, 2019
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

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