[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
   

   View Slide

2. Kuro Hsu
   - Front-End Developer
   - Organizers of Vue.js Taiwan
   - https://kuro.tw
   - kurotanshi@gmail.com
   - @kurotanshi
   

   View Slide

3. Vue 3.0 發展近況
   • 10/05 發布 pre-alpha 原始碼
   
   • 預計 Q1 2020 推出正式版本
   
   • Vue Roadmap - https://github.com/vuejs/vue/
   projects/6
   

   View Slide

4. View Slide

5. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. Composition API
    

    View Slide

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

    View Slide

13. 對比過去做法
    

    View Slide

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

    View Slide

15. Mixins
    

    View Slide

16. HOC: Higher-order
    Components
    

    View Slide

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

    View Slide

18. Renderless Components
    

    View Slide

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

    View Slide

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

    View Slide

21. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. View Slide

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

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

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

    View Slide

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

    View Slide

38. 新⼿手入坑
    
    應該等到 3.0 釋出再學嗎?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. Thanks
    

    View Slide