$30 off During Our Annual Pro Sale. View Details »

初探 Vue 3.0 Function API

Kuro Hsu
August 06, 2019

初探 Vue 3.0 Function API

v-tw meetup #03 @ LINE TW
2019/08/06

Kuro Hsu

August 06, 2019
Tweet

More Decks by Kuro Hsu

Other Decks in Programming

Transcript

  1. 初探 Vue 3.0
    Function API
    Kuro Hsu @ LINE TW
    v-tw meetup #003
    2019/08/06

    View Slide

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

    View Slide

  3. 社群現況

    View Slide

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

    View Slide

  5. 超過九成的報名者在⼗十秒內
    完成報名

    View Slide

  6. 下次的活動... 規劃中
    敬請期待

    View Slide

  7. 關於 Vue 3.0 的進展

    View Slide

  8. 好消息

    View Slide

  9. View Slide

  10. View Slide

  11. 壞消息

    View Slide

  12. View Slide

  13. 3.0 多了了哪些新特性

    View Slide

  14. Vue 3.0 RFC
    https://github.com/vuejs/rfcs

    View Slide

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

    View Slide

  16. • Object.defineProperty -> Proxy API
    • Virtual DOM 重構
    • 增強編譯時的優化
    • 更更多細節請參參閱尤⼤大在 VueConf 2019 的演講:

    https://docs.google.com/presentation/d/
    1giA0aF6b5kljg42NUYVTB5bMxxgAc2iRVPVDo2s
    TirI/edit

    View Slide

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

    View Slide

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

    View Slide

  19. Vue 3.0 Function-based API

    View Slide

  20. • ⼜又稱 composition functions
    • 以「組合代替繼承」來來實作元件的複⽤用
    • 更更靈活的程式邏輯複⽤用
    • 對 TypeScript 的類型推導⽀支援更更好
    • Tree-shaking friendly、編譯後程式碼更更容易易被壓縮
    Vue 3.0 Function-based API

    View Slide

  21. 對比過去其他做法

    View Slide

  22. Mixins

    View Slide

  23. Mixins
    • ❌ 可能造成 Namespace 的衝突
    • ❌ 從 Mixins 引入的屬性難以追蹤來來源

    View Slide

  24. HOC: Higher-order
    Components

    View Slide

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

    View Slide

  26. Renderless Components

    View Slide

  27. Renderless Components
    • ✅ 資料來來源清晰
    • ✅ 無 namespace 衝突問題
    • ❌ 多餘的元件實體造成性能浪費

    View Slide

  28. Vue 3.0
    Function-
    based API

    View Slide

  29. • ✅ 資料來來源清晰
    • ✅ 無 namespace 衝突問題
    • ✅ 不會產⽣生多餘的元件實體
    Vue 3.0 Function-based API

    View Slide

  30. View Slide

  31. https://github.com/vuejs/vue-function-api

    View Slide

  32. Install

    View Slide

  33. setup ( )
    • 將共⽤用邏輯放在 setup 函式
    • 第⼀一個參參數是 props
    • setup( ) 內無法透過 this 存取⽬目前元件,
    但可以透過第⼆二個 context 參參數取得對應
    的屬性
    • 最後透過 return 的物件來來與元件實體溝通

    View Slide

  34. value( )
    • value( ) 會為元件⽣生成⼀一個響應式
    的屬性 (如同原本的 data)
    • 存取時透過 value( ) 的回傳
    的 .value 屬性即可

    View Slide

  35. state( )
    • 未透過 value( ) 包裝的響應式物

    • 意義上等同於 v2.x 的
    Vue.observable( )

    View Slide

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

    View Slide

  37. watch( )
    • 透過 watch 追蹤某個狀狀態的變化,
    同時呼叫 callback function
    • 第⼀一個參參數是狀狀態來來源,第⼆二個則
    是對應的 callback function

    View Slide

  38. Lifecycle hooks
    • 除了了 beforeCreated 之外的
    Lifecycle hook 都可以透過
    onXXX 的形式來來對應
    • 另外新增了了 onUnmounted

    View Slide

  39. Provide / Inject
    • 與 v2.x 的 provide、 inject 作⽤用
    完全⼀一樣。

    View Slide

  40. Let’s Demo: Todo List

    View Slide

  41. https://github.com/kurotanshi/vue-function-api-demo

    View Slide

  42. ⼤大家關⼼心的事...

    View Slide

  43. 轉換成本

    View Slide

  44. View Slide

  45. 在社群 激戰 討論後,
    更更新後的 RFC 已取消此策略略
    來源: https://github.com/vuejs/rfcs/commit/6fe6f7be06dd5982be3c57e248fcd66cd55748e0

    View Slide

  46. https://suspicious-mclean-0e54c3.netlify.com/

    View Slide

  47. 轉換成本 === 0

    View Slide

  48. • 已知 2.x -> 3.x 不會有 Breaking Change,完全相容現有 API
    • 新版本更更多的是底層的改寫,對多數開發者來來說沒有明顯差距
    • 就是需要回饋才設有 RFC,有意⾒見見歡迎⾄至 RFC 反應

    View Slide

  49. ⚠ 投資⼀一定有風險,開發前應詳閱公開說明書 ⚠

    View Slide

  50. Thanks

    View Slide