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

    View full-size slide

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

    View full-size slide

  3. Vue 3.0 發展近況
    • 10/05 發布 pre-alpha 原始碼

    • 預計 Q1 2020 推出正式版本

    • Vue Roadmap - https://github.com/vuejs/vue/
    projects/6

    View full-size slide

  4. • ⽬目標是更更⼩小、更更快

    • 加強對 TypeScript 的⽀支援

    • 加強 API 設計⼀一致性

    • 提⾼高可維護性

    • 開放更更多底層功能

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Class API
    • 為了了增強與 TypeScript 的⽀支援

    • 與現有 API 的相容性差異異太⼤大

    • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整

    • 標準對 class fields, decorators 等提案還不穩定

    View full-size slide

  8. Class API
    • 為了了增強與 TypeScript 的⽀支援

    • 與現有 API 的相容性差異異太⼤大

    • 瀏覽器對原⽣生 Class API 的⽀支援還不夠完整

    • 標準對 class fields, decorators 等提案還不穩定
    CANCELED

    View full-size slide

  9. Composition API

    View full-size slide

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

    View full-size slide

  11. 對比過去做法

    View full-size slide

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

    View full-size slide

  13. HOC: Higher-order
    Components

    View full-size slide

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

    View full-size slide

  15. Renderless Components

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 新⼿手入坑

    應該等到 3.0 釋出再學嗎?

    View full-size slide

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

    View full-size slide

  30. 期待 Vue 3.0 早⽇日到來來

    View full-size slide

  31. Vue.js Taiwan
    https://vue.tw

    View full-size slide